/* ==========================================================================
   StoneSmartAI – Chat Messages & Scroll
   Phase 7 – Split CSS (Chat Layer)
   Goals: solid scroll, right-aligned user, rounded glass bubbles,
          actions inline under bubble, typing dots, jump-to-bottom styling
   ========================================================================== */

/* Chat pages must not body-scroll; all scroll is internal */
body[data-page="chat"]{
  height: 100%;
  overflow: hidden;
}

/* Main column must be height-constrained so .messages can scroll */
body[data-page="chat"] .main{
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

/* Wrapper must allow its child (.messages) to become the scroll container */
body[data-page="chat"] #partial-messages{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;

  /* critical: guarantees .messages can flex and scroll */
  display: flex;
  flex-direction: column;
}

/* THE ONLY scroll container in chat area */
body[data-page="chat"] .messages{
  flex: 1 1 auto;
  min-height: 0;
  height: auto;                 /* defeats any legacy calc-heights */
  overflow-y: auto;
  overflow-x: hidden;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;

  gap: 12px;

  /* leave room for fixed footer; top padding depends on desktop/mobile */
  padding: 12px 16px calc(var(--footerH) + var(--safeBottom) + 24px);

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* scrollbar visible + stable */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.55) transparent;
}

/* Dark scrollbar */
html[data-theme="dark"] body[data-page="chat"] .messages{
  scrollbar-color: rgba(148,163,184,.45) transparent;
}

/* Desktop: header is in flow (sticky), normal padding is enough */
@media (min-width: 981px){
  body[data-page="chat"] .messages{
    padding-top: 12px;
  }
}

/* Mobile: header is fixed => we must offset content.
   IMPORTANT: override legacy style.css rules that use !important */
@media (max-width: 980px){
  body[data-page="chat"] #partial-messages > .messages,
  body[data-page="chat"] .messages{
    padding-top: calc(var(--headerH) + var(--safeTop) + 50px) !important;
    padding-bottom: calc(var(--footerH) + var(--safeBottom) + 60px) !important;

    /* improves scroll-to-top and prevents first message hiding under header */
    scroll-padding-top: calc(var(--headerH) + var(--safeTop) + 50px);
    scroll-padding-bottom: calc(var(--footerH) + var(--safeBottom) + 60px);
  }
}

/* WebKit scrollbar */
body[data-page="chat"] .messages::-webkit-scrollbar{ width: 10px; }
body[data-page="chat"] .messages::-webkit-scrollbar-track{ background: transparent; }
body[data-page="chat"] .messages::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.35);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
body[data-page="chat"] .messages::-webkit-scrollbar-thumb:hover{
  background: rgba(148,163,184,.55);
}

/* ==========================================================================
   Message layout (Grid) + modern rounded glass bubbles
   ========================================================================== */

body[data-page="chat"] .msg{
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-auto-rows: auto;
  column-gap: 10px;
  row-gap: 8px;
  align-items: start;
  width: 100%;
}

/* avatar baseline (works for user + assistant) */
body[data-page="chat"] .msg .avatar{
  grid-column: 1;
  grid-row: 1;

  width: 28px;
  height: 28px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);

  flex: 0 0 auto;
}

/* bubble */
body[data-page="chat"] .msg .bubble{
  grid-column: 2;
  grid-row: 1;

  border: 1px solid var(--line);
  border-radius: 22px;          /* modern rounded */
  box-shadow: var(--shadow);

  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);

  padding: 12px 14px;

  max-width: min(860px, 92vw);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Assistant bubble – glass */
body[data-page="chat"] .msg.assistant .bubble{
  background: linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.28));
  color: var(--bubble-assistant-text);
}
html[data-theme="dark"] body[data-page="chat"] .msg.assistant .bubble{
  background: linear-gradient(180deg, rgba(15,23,42,0.62), rgba(15,23,42,0.30));
}

/* User bubble – blue glass */
body[data-page="chat"] .msg.user .bubble{
  background: linear-gradient(180deg, rgba(37,99,235,0.18), rgba(37,99,235,0.10));
  color: var(--bubble-user-text);
}
html[data-theme="dark"] body[data-page="chat"] .msg.user .bubble{
  background: linear-gradient(180deg, rgba(37,99,235,0.26), rgba(37,99,235,0.16));
}

/* ==========================================================================
   USER ALIGNMENT – fully right (fix)
   Avatar stays LEFT of bubble, but whole message docks to the right edge.
   ========================================================================== */

body[data-page="chat"] .msg.user{
  align-self: flex-end;          /* dock the whole element to the right */
  width: fit-content;
  max-width: 100%;

  /* keep avatar left of bubble */
  grid-template-columns: 34px auto;
}

body[data-page="chat"] .msg.user .avatar{
  grid-column: 1;
  grid-row: 1;
}

body[data-page="chat"] .msg.user .bubble{
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

/* System note (if present) */
body[data-page="chat"] .msg.system .system-note{
  grid-column: 2;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(15,23,42,.08);
  color: var(--text);
}

/* ==========================================================================
   Actions under bubble (app_ui.js builds .msg-actions .action)
   Side-by-side; if too many -> horizontal scroll (NOT wrapping)
   ========================================================================== */

body[data-page="chat"] .msg-actions{
  grid-column: 2;
  grid-row: 2;

  display: inline-flex;
  flex-wrap: nowrap;             /* keep side-by-side */
  gap: 8px;
  align-items: center;

  width: fit-content;
  max-width: min(860px, 92vw);

  overflow-x: auto;              /* overflow sideways instead of wrapping */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 8px;

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  z-index: 40;
  pointer-events: auto;
}

/* subtle horizontal scrollbar for actions */
body[data-page="chat"] .msg-actions::-webkit-scrollbar{ height: 6px; }
body[data-page="chat"] .msg-actions::-webkit-scrollbar-track{ background: transparent; }
body[data-page="chat"] .msg-actions::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.28);
  border-radius: 999px;
}

body[data-page="chat"] .msg-actions .action{
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.18);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  flex: 0 0 auto;
}

html[data-theme="dark"] body[data-page="chat"] .msg-actions .action{
  background: rgba(15,23,42,0.24);
}
body[data-page="chat"] .msg-actions .action:hover{
  filter: brightness(1.06);
}

/* If legacy .actions-bar exists somewhere, hide it */
body[data-page="chat"] .actions-bar{ display: none !important; }

/* ==========================================================================
   Typing Dots – 3 animated points until answer comes
   app_core.js uses: .typing .bubble.typing-dots and spans x3
   ========================================================================== */

body[data-page="chat"] .typing .bubble.typing-dots{
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body[data-page="chat"] .typing .bubble.typing-dots > span{
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--primary);
  opacity: .85;
  animation: ssaiDots 1.05s infinite ease-in-out;
}

body[data-page="chat"] .typing .bubble.typing-dots > span:nth-child(2){ animation-delay: .15s; }
body[data-page="chat"] .typing .bubble.typing-dots > span:nth-child(3){ animation-delay: .30s; }

@keyframes ssaiDots{
  0%, 80%, 100%{ transform: translateY(0); opacity: .55; }
  40%{ transform: translateY(-4px); opacity: 1; }
}

/* ==========================================================================
   Assistant avatar logo (restore StoneSmartAI icon instead of "AI")
   ========================================================================== */

body[data-page="chat"] .msg.assistant .avatar{
  background: none;
  border: 0;
  padding: 0;

  color: transparent;            /* hides "AI" text */
  font-size: 0;                  /* hides "AI" text */

  width: 28px;
  height: 28px;
}

body[data-page="chat"] .msg.assistant .avatar::before{
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: url("../media/StoneSmartAI.png") center/cover no-repeat;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}

body[data-page="chat"] .msg.assistant .avatar svg{ display: none; }

/* ==========================================================================
   Jump-to-bottom (app_core.js creates #jump-bottom and toggles .show)
   Style only – position centered like ChatGPT
   ========================================================================== */

#jump-bottom{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--footerH) + var(--safeBottom) + 18px);

  z-index: 2000;

  width: 44px;
  height: 44px;
  border-radius: 999px;

  display: none;                 /* JS toggles */
  align-items: center;
  justify-content: center;

  font-size: 20px;
  line-height: 1;

  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);

  cursor: pointer;

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}

#jump-bottom.show{
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#jump-bottom:hover{
  filter: brightness(1.06);
}


/* SSAI Voice Settings Modal */

.ssai-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.ssai-modal.is-open{ display:block; }
.ssai-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.ssai-modal__panel{ position:relative; max-width:520px; width:calc(100% - 24px); margin:10vh auto; background:#111; color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; }
body.light .ssai-modal__panel{ background:#fff; color:#111; border-color:rgba(0,0,0,.12); }
.ssai-modal__head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.12); }
body.light .ssai-modal__head{ border-bottom-color:rgba(0,0,0,.12); }
.ssai-modal__title{ font-weight:700; }
.ssai-modal__close{ background:transparent; border:0; color:inherit; font-size:18px; cursor:pointer; }
.ssai-modal__body{ padding:14px; display:grid; gap:12px; }
.ssai-field{ display:grid; gap:6px; }
.ssai-label{ font-size:13px; opacity:.9; }
.ssai-input{ width:100%; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:inherit; }
body.light .ssai-input{ border-color:rgba(0,0,0,.18); background:rgba(0,0,0,.04); }
.ssai-modal__row{ display:flex; gap:10px; justify-content:flex-end; }
.ssai-btn{ padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:inherit; cursor:pointer; }
body.light .ssai-btn{ border-color:rgba(0,0,0,.18); background:rgba(0,0,0,.04); }
.ssai-btn--primary{ background:rgba(255,255,255,.18); }
body.light .ssai-btn--primary{ background:rgba(0,0,0,.12); }
@media (max-width:480px){
  .ssai-modal__panel{ margin:6vh auto; }
}