/* =====================================================================
   بصيرة — AI copilot widget styles (shared by dashboard v2 and the
   full-analysis page; base chat panel styles live in dashboard.css)
   ===================================================================== */

/* Answer body — ChatGPT-like formatted text */
.bot-answer{white-space:pre-line}
.bot-answer p{margin:0 0 8px;line-height:1.85}
.bot-answer p:last-child{margin-bottom:0}
.bot-answer ul,.bot-answer ol{margin:6px 2px 8px;padding-inline-start:20px;display:flex;flex-direction:column;gap:4px}
.bot-answer li{line-height:1.8}
.bot-answer li::marker{color:var(--gold-500)}
.bot-caret{display:inline-block;width:7px;height:14px;background:var(--gold-500);border-radius:2px;
  vertical-align:middle;margin-inline-start:3px;animation:aiCaret .9s steps(2) infinite}
@keyframes aiCaret{0%{opacity:1}50%{opacity:0}100%{opacity:1}}

.bot-summary{margin:8px 2px 0;padding-inline-start:18px;display:flex;flex-direction:column;gap:4px;font-size:11.8px;color:var(--ink-2)}
.bot-chart-title{margin-top:10px;font-size:10.8px;font-weight:600;color:var(--ink-2)}
.bot-chart{position:relative;height:190px;margin-top:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:8px}

.bot-insights{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.bin{display:flex;align-items:flex-start;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;min-width:0}
/* The badge carries model-supplied text (a formatted currency value can be
   long). Kept unshrinkable + nowrap it forces the row past the bubble width,
   and because .cp-msgs scrolls vertically its overflow-x resolves to auto —
   one long value turns the whole message list into a horizontal scroller. */
.bin .sbadge{flex-shrink:1;min-width:0;white-space:normal}
.bin .sbadge .d{flex-shrink:0}
.bin-body{display:flex;flex-direction:column;gap:2px;font-size:11.4px;line-height:1.6;min-width:0}
/* Model output must never be able to push a bubble wider than its container. */
.msg .bubble,.bot-answer,.bin-body,.bin .sbadge{overflow-wrap:anywhere;word-break:break-word}
.bin-body b{font-size:11.6px;color:var(--ink)}
.bin-body span{color:var(--ink-2)}

.bot-cta{display:inline-flex;align-items:center;gap:7px;margin-top:11px;padding:7px 16px;border-radius:var(--r-full);
  background:var(--gold-500);color:#fff;font-size:11.8px;font-weight:600;text-decoration:none;transition:background .15s}
.bot-cta:hover{background:var(--gold-600)}
.bot-cta svg{flex-shrink:0}

.typing-wrap{display:flex;align-items:center;gap:11px;align-self:flex-end}
.typing-status{font-size:11.2px;color:var(--ink-3)}

/* Thinking indicator — the بصيرة emblem in motion: outer frame breathing,
   the rotated square spinning, the golden core pulsing. */
.ai-think{display:flex;align-items:center;justify-content:center;padding:6px}
.ai-think svg{width:34px;height:34px;overflow:visible}
.ai-think rect{fill:none;stroke:var(--green-600,#0E6058);stroke-width:3.6}
.ai-think .tk-frame rect{opacity:.35;animation:tkBreathe 2.4s ease-in-out infinite}
.ai-think .tk-spin{transform-origin:32px 32px;animation:tkSpin 2.6s linear infinite}
.ai-think .tk-core{fill:var(--gold-500,#B08D2E);transform-origin:32px 32px;animation:tkPulse 1.3s ease-in-out infinite}
@keyframes tkSpin{to{transform:rotate(360deg)}}
@keyframes tkPulse{0%,100%{transform:scale(.78);opacity:.75}50%{transform:scale(1.12);opacity:1}}
@keyframes tkBreathe{0%,100%{opacity:.25}50%{opacity:.6}}

/* Larger, clearly visible on the report page thread */
.aa-thread .ai-think svg{width:44px;height:44px}
.aa-thread .typing-status{font-size:12px}

/* Microphone button + recording state */
.cp-mic{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;
}
.cp-mic:hover{border-color:var(--green-500);color:var(--green-600)}
.cp-mic.rec{background:var(--critical,#c0392b);border-color:var(--critical,#c0392b);color:#fff;animation:aiRec 1.1s ease-in-out infinite}
.cp-mic.busy{opacity:.55;pointer-events:none}
@keyframes aiRec{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.35)}50%{box-shadow:0 0 0 8px rgba(192,57,43,0)}}

/* While recording, a live waveform takes the input field's place (both
   composers). Bars are scaled from the mic stream by ai-chat.js; css-only
   is the pulse fallback when WebAudio is unavailable. */
.cp-input.recording textarea,.aa-chatbar-inner.recording textarea{display:none}
.cp-wave{
  flex:1;min-width:0;align-self:stretch;min-height:38px;
  display:flex;align-items:center;justify-content:center;gap:3px;
  padding-inline:14px;overflow:hidden;
}
.cp-wave span{
  flex:0 0 3px;height:22px;border-radius:2px;
  background:var(--critical,#c0392b);opacity:.85;
  transform:scaleY(.18);transform-origin:center;will-change:transform;
}
.cp-wave.css-only span{animation:aiWaveIdle 1.1s ease-in-out infinite}
.cp-wave.css-only span:nth-child(3n){animation-delay:.14s}
.cp-wave.css-only span:nth-child(3n+1){animation-delay:.28s}
.cp-wave.css-only span:nth-child(5n){animation-delay:.42s}
@keyframes aiWaveIdle{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(.8)}}
@media (prefers-reduced-motion:reduce){
  .cp-wave.css-only span{animation:none;transform:scaleY(.45)}
}

/* Toast fallback for pages without the dashboard toast */
#aiToast .txt{display:inline-block}

/* =====================================================================
   Inline mode (full-report page) — ChatGPT-style: the conversation lives
   in the page flow and the composer bar is fixed to the bottom.
   ===================================================================== */

.aa-thread-wrap{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.aa-thread-hint{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:11.6px;color:var(--ink-3);padding:10px 0;border-top:1px dashed var(--line-2);
}
.aa-thread-hint svg{color:var(--gold-500);flex-shrink:0}
.aa-thread{display:flex;flex-direction:column;gap:16px}
.aa-thread:empty{display:none}

.aa-thread .msg{max-width:none}
.aa-thread .msg.user{align-self:flex-start;max-width:72%}
.aa-thread .msg.user .bubble{font-size:13px;padding:11px 16px}
.aa-thread .msg.bot{width:100%;max-width:none;align-items:stretch}
.aa-thread .msg.bot .bubble{padding:18px 22px;font-size:13.2px;border-radius:var(--r-lg)}
.aa-thread .msg .who{align-self:flex-start}
.aa-thread .msg.bot .who{align-self:flex-end}
.aa-thread .bot-chart{height:280px}
.aa-thread .bot-summary{font-size:12.6px}
.aa-thread .bin-body{font-size:12.2px}
.aa-thread .bin-body b{font-size:12.4px}
.aa-thread .typing-wrap{align-self:flex-end}

/* Floating composer pill (ChatGPT-style): the bar hovers over the page with
   a soft fade behind it instead of sitting flush on the viewport edge. */
/* --kb is the soft-keyboard overlap measured by ai-chat.js from the
   VisualViewport API (0px when unset, so desktop is unaffected): iOS ignores
   `interactive-widget`, and without this the composer stays anchored behind
   the keyboard while the user types blind. */
.aa-chatbar{
  position:fixed;left:0;right:0;
  bottom:calc(16px + var(--kb,0px) + env(safe-area-inset-bottom,0px));z-index:70;
  padding:0 20px;pointer-events:none;
}
.aa-chatbar::before{
  content:'';position:absolute;left:0;right:0;bottom:-16px;height:110px;z-index:-1;
  background:linear-gradient(to top,var(--page) 34%,transparent);pointer-events:none;
}
.aa-chatbar-inner{
  max-width:840px;margin-inline:auto;display:flex;gap:6px;align-items:flex-end;pointer-events:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:24px;padding:7px 8px;
  box-shadow:0 14px 40px rgba(2,34,32,.16),0 3px 10px rgba(2,34,32,.08);
  transition:box-shadow .18s,border-color .18s;
}
.aa-chatbar-inner:focus-within{border-color:var(--ai-500,var(--gold-500));box-shadow:0 16px 46px rgba(2,34,32,.2),0 0 0 3px rgba(176,141,46,.12)}
.aa-chatbar textarea{
  flex:1;min-width:0;height:40px;min-height:40px;max-height:86px;padding:9px 14px;border:none;background:transparent;
  font-family:inherit;font-size:13.2px;line-height:1.45;color:var(--ink);outline:none;resize:none;overflow-y:hidden;box-sizing:border-box;
}
.aa-chatbar .cp-mic{width:40px;height:40px;border:none;background:transparent}
.aa-chatbar .cp-mic:hover{background:var(--surface-2)}
.aa-chatbar .cp-mic.rec{background:var(--critical,#c0392b)}
.aa-send{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:var(--gold-500);color:#fff;display:inline-flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.aa-send:hover{background:var(--gold-600)}

@media(max-width:640px){
  /* ---- Bubbles: use the full sheet width, keep long values inside ---- */
  .msg.bot{max-width:100%}
  .msg .bubble{padding:10px 12px}
  .aa-thread .msg.user{max-width:92%}
  .aa-thread .msg.bot .bubble{padding:14px 14px;font-size:13px}

  /* A stacked insight row cannot be forced wider than the bubble by a long
     badge value, however the model formats it. */
  .bin{flex-direction:column;align-items:flex-start;gap:6px;padding:9px 11px}

  /* 190px minus the wrapped legend leaves ~110px of plot: donuts render as a
     sliver and horizontal bars collapse. Give the plot real room instead. */
  .bot-chart{height:250px;padding:5px}
  .bot-summary{padding-inline-start:16px}

  /* ---- Touch targets (44px) ---- */
  .cp-mic{width:44px;height:44px}
  .aa-chatbar .cp-mic,.aa-send{width:44px;height:44px}
  .aa-chatbar-inner{gap:4px;padding:6px 7px}
  /* 16px exactly: iOS Safari force-zooms the page on focus for anything
     smaller and never zooms back out, after which the fixed bar is wider
     than the visual viewport — the main reason the page feels "ضايع". */
  .aa-chatbar textarea{font-size:16px;min-height:44px;max-height:96px;padding:10px 10px}
  .aa-chatbar{padding-inline:12px}

  /* The single most important conversion in the chat — give it a real tap
     area instead of a 33px pill wedged against the bubble edge. */
  .bot-cta{display:flex;width:100%;min-height:44px;justify-content:center;font-size:12.5px}

  /* ---- Quick chips: hint that the row scrolls, and never let the swipe
     hand over to the browser's back gesture (rules live in dashboard.css). --- */
  .cp-quick{
    padding:10px 14px 8px;gap:8px;overscroll-behavior-inline:contain;
    -webkit-mask-image:linear-gradient(to left,#000 84%,transparent);
    mask-image:linear-gradient(to left,#000 84%,transparent);
  }
  .cp-quick button{font-size:12px;min-height:40px;padding:8px 14px}
}

/* iPad and any other touch-primary device wider than the phone breakpoint
   force-zooms on focus for sub-16px inputs exactly like iPhone Safari, so the
   composer size and the tap targets are gated on the pointer, not the width. */
@media (pointer:coarse) and (min-width:641px){
  .cp-mic,.aa-chatbar .cp-mic,.aa-send{width:44px;height:44px}
  .aa-chatbar textarea{font-size:16px;min-height:44px;max-height:96px}
  .bot-cta{min-height:44px}
}