From bcfcb09d3f55214be7a563135a6f56d473b4d7cd Mon Sep 17 00:00:00 2001
From: chetsCMD <104981866+chetsCMD@users.noreply.github.com>
Date: Thu, 5 Feb 2026 14:21:52 +0300
Subject: [PATCH] Update styles.css

---
 styles.css | 101 +++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 83 insertions(+), 18 deletions(-)

diff --git a/styles.css b/styles.css
index 7b33f87..f283cfb 100644
--- a/styles.css
+++ b/styles.css
@@ -1,37 +1,102 @@
 .tooltip-word {
-  position: relative;
   cursor: help;
-  border-bottom: 2px dotted var(--text-muted);
-  transition: color 0.25s ease, border-color 0.25s ease;
+  display: inline;
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--text-muted);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+  text-decoration-skip-ink: none;
+  transition: color 0.25s ease, text-decoration-color 0.25s ease;
 }
 
 .tooltip-word:hover {
   color: var(--text-accent);
-  border-color: var(--text-accent);
+  text-decoration-color: var(--text-accent);
 }
 
 .tooltip-text {
+  position: fixed;
+  z-index: 2147483647;
   visibility: hidden;
   opacity: 0;
   width: max-content;
-  max-width: 300px;
-  background-color: var(--background-secondary);
+  max-width: 400px;
+  min-width: 150px;
+  background-color: var(--background-primary);
   color: var(--text-normal);
   text-align: left;
-  border-radius: 8px;
-  padding: 8px 10px;
-  position: absolute;
-  z-index: 100;
-  bottom: 125%;
-  left: 50%;
-  transform: translateX(-50%) translateY(5px);
-  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
+  border-radius: 10px;
+  padding: 12px 14px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--background-modifier-border);
   transition: opacity 0.3s ease, transform 0.3s ease;
-  font-size: 0.9em;
+  font-size: 1em;
+  line-height: 1.4;
+  white-space: normal;
+  word-wrap: break-word;
+  transform-origin: bottom center;
+  user-select: text;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
 }
 
-.tooltip-word:hover .tooltip-text {
+.tooltip-text.visible {
   visibility: visible;
   opacity: 1;
-  transform: translateX(-50%) translateY(0);
-}
\ No newline at end of file
+  transform: translateY(-5px);
+}
+
+.tooltip-text a.internal-link {
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--text-accent);
+  font-weight: 500;
+  user-select: auto;
+}
+
+.tooltip-text a.external-link {
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--text-accent-hover);
+  font-weight: 500;
+  user-select: auto;
+}
+
+.tooltip-text a.internal-link:hover,
+.tooltip-text a.external-link:hover {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+}
+
+.tooltip-text code {
+  background-color: var(--background-secondary);
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-family: var(--font-monospace);
+  font-size: 0.9em;
+  user-select: text;
+}
+
+.tooltip-text strong {
+  font-weight: 700;
+}
+
+.tooltip-text em {
+  font-style: italic;
+}
+
+.tooltip-text mark {
+  background-color: var(--text-highlight-bg);
+  color: var(--text-normal);
+  padding: 1px 2px;
+  border-radius: 2px;
+}
+
+@media (max-width: 768px) {
+  .tooltip-text {
+    max-width: 280px;
+    font-size: 0.95em;
+    padding: 10px 12px;
+  }
+}