/* Chat Theme: chat_zeitdruckcomic
   Scope: Chat panel, bubbles, markdown, illustration tooltip, countdown number
   Note: Loaded after base styles.css to override where necessary. */

/* Chat panel core */
.chat-panel{
  margin-top:12px; border:1px solid var(--line); border-radius:12px; background: var(--bg);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  min-height: 40vh; max-height: 48vh; overflow:hidden; opacity:0; transform: translateY(8px) scale(.98);
  filter: blur(8px);
  transition: opacity .28s ease, transform .28s ease, filter .28s ease;
}
.chat-panel.visible{opacity:1; transform:none; filter: blur(0)}
.chat-header{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:2px; align-items:center}
.chat-header-title{font-weight:700; font-size:1.1rem; color:var(--text)}
.chat-header-subtitle{font-weight:400; font-size:0.85rem; color:var(--muted); letter-spacing:0.02em}
.chat-messages{padding:14px; overflow:auto; max-height: calc(48vh - 60px); display:flex; flex-direction:column; gap:10px; font-size: var(--chat-font-size); line-height:1.6}
.msg{display:flex}
.msg-bot, .msg.bot{justify-content:flex-start}
.msg-user, .msg.user{justify-content:flex-end}
.msg-bubble{max-width: 100%; padding:12px 14px; border-radius:12px; background: var(--bg-weak); border:1px solid var(--line); color: var(--text)}
.msg-bubble .chat-title{margin:0 0 6px; font-weight:700; font-size: calc(var(--chat-font-size) * 1.27)}
.msg-bubble p{margin:6px 0 0}
.msg-bubble ul{margin:6px 0 0 16px; padding:0}
.msg-bubble li{margin: 2px 0; font-size: 1em}
.msg.user .msg-bubble{background: rgba(138,198,64,.18); border-color: rgba(138,198,64,.35)}

/* Markdown rendering */
.msg-bubble pre{background: var(--bg-weak); border:1px solid var(--line); border-radius:8px; padding:12px; overflow:auto; margin:8px 0 0}
.msg-bubble code{background: var(--bg-weak); border:1px solid var(--line); border-radius:4px; padding:0 4px; font-family: var(--font-mono); font-size:.95em}
.msg-bubble pre code{background: transparent; border:0; padding:0; font-size:.9em}
.msg-bubble hr{ border: none; border-top: 1px solid var(--line); margin: 10px 0 }
.msg-bubble table{width:100%; border-collapse:collapse; margin:8px 0 0}
.msg-bubble th, .msg-bubble td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
.msg-bubble thead th{background: var(--bg-weak); font-weight:700}
/* Links in bot answers */
.msg-bubble a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.msg-bubble a:hover{ border-color: var(--accent) }
.msg-bubble a:visited{ color: var(--accent) }
.msg-bubble a:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
  border-color: var(--accent);
}
/* Emphasize table head in accent with dark text */
.msg-bubble thead th,
.msg-bubble thead td{
  background: var(--accent);
  color: #0E0F10; /* near-black for readability */
  font-weight: 800;
}

/* Light mode: ensure paragraph text in chat is black for readability */
[data-theme="light"] .chat-messages p{ color: #000000 }
[data-theme="light"] .chat-panel{ color: var(--text) }
[data-theme="light"] .chat-header-title{ color: #000000 }
[data-theme="light"] .chat-header-subtitle{ color: #666666 }

/* Illustration + tooltip */
.chat-ill-wrap{ float:right; position:relative; display:inline-block; margin: 0 0 6px 12px }
.chat-ill{ display:block; width:120px; height:auto; border-radius:0 }
@media (max-width:640px){ .chat-ill{ width:80px } }
.chat-ill-wrap[data-tip]{cursor: help}
.chat-ill-wrap[data-tip]::after{
  content: attr(data-tip);
  position:absolute; right: 100%; top: -6px; transform: translateX(-10px) translateY(0) scale(.78);
  transform-origin: right center;
  max-width: 240px; white-space: normal;
  font-family: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive;
  font-weight: 800;
  font-size: 1.25em;
  background: 
    radial-gradient(100px 60px at 20% 30%, rgba(138,198,64,.18), rgba(138,198,64,0) 60%),
    radial-gradient(120px 70px at 80% 70%, rgba(0,180,255,.16), rgba(0,180,255,0) 60%),
    radial-gradient(90px 50px at 50% 50%, rgba(255,0,128,.14), rgba(255,0,128,0) 60%),
    var(--bg);
  color: var(--text);
  border: 3px solid var(--accent);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 8px 26px rgba(0,0,0,.18), 0 0 0 2px rgba(255,255,255,.05) inset;
  z-index: 5; pointer-events:none; opacity:0; transition: .18s ease;
}
.chat-ill-wrap[data-tip]::before{
  content:""; position:absolute; right: calc(100% - 6px); top: 20px; width:16px; height:16px;
  background: var(--bg);
  border: 3px solid var(--accent);
  border-left: none; border-bottom: none; transform: rotate(45deg);
  box-shadow: 4px -4px 16px rgba(0,0,0,.08);
  z-index: 4; opacity:0; transition: .18s ease;
}
.chat-ill-wrap:hover::after, .chat-ill-wrap:focus-visible::after{opacity:1; animation: tip-pop .22s cubic-bezier(.2,.9,.2,1.02) forwards}
.chat-ill-wrap:hover::before, .chat-ill-wrap:focus-visible::before{opacity:1; animation: tip-pop-arrow .22s cubic-bezier(.2,.9,.2,1.02) forwards}
@keyframes tip-pop{ 0%{ transform: translateX(-10px) translateY(0) scale(.75); opacity:0 } 60%{ transform: translateX(-10px) translateY(0) scale(1.06); opacity:1 } 100%{ transform: translateX(-10px) translateY(0) scale(1); opacity:1 } }
@keyframes tip-pop-arrow{ 0%{ transform: rotate(45deg) scale(.7); opacity:0 } 60%{ transform: rotate(45deg) scale(1.05); opacity:1 } 100%{ transform: rotate(45deg) scale(1); opacity:1 } }

/* Countdown number highlight */
.countdown-num{ color: var(--accent); font-weight: 800; font-size: 2em; line-height: 1; display: inline-block; padding: 0 4px; }
/* Chat theme variables */
:root{
  --chat-font-size: 1.1rem; /* Base font size for chat content */
}

/* Blinking down-arrow indicator until user scrolls */
.down-arrow{ display:inline-block; }
.down-arrow.blink{ animation: arrowBlink 1s ease-in-out infinite; }
@keyframes arrowBlink{
  0%{ opacity:.25; transform: translateY(0) }
  50%{ opacity:1; transform: translateY(2px) }
  100%{ opacity:.25; transform: translateY(0) }
}

/* Centered overlay layout */
.chat-overlay{
  position: fixed; inset:0; display:flex; flex-direction: column; align-items:center; justify-content:center;
  padding: 20px 0; z-index: 1300; pointer-events: none;
  background: rgba(10,12,14,.22);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  backdrop-filter: saturate(120%) blur(10px);
}
.chat-overlay .chat-panel{ pointer-events: auto; }
.chat-panel.centered{ width: min(1160px, 92vw); max-height: 70vh; }
.chat-panel.centered .chat-messages{ max-height: calc(70vh - 44px) }
.chat-overlay .ask-box.open{ position: static !important; width: min(1160px, 92vw); margin-top: 12px; pointer-events: auto; }
@media (max-width: 640px){
  .chat-panel.centered{ width: 100%; max-height: 72vh; }
  .chat-panel.centered .chat-messages{ max-height: calc(72vh - 44px) }
  .chat-overlay{ padding: 12px 0; }
  .chat-overlay .ask-box.open{ width: 100%; }
}