/* Sunny — Application Stylesheet
 * my.solantex.net
 * Version: 1.0.0
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --sun:      #F59E0B;
  --sun-dk:   #D97706;
  --sun-glow: rgba(245,158,11,.20);
  --sun-tint: rgba(245,158,11,.10);

  --navy:     #0A2540;
  --navy2:    #0D2E4D;
  --navy3:    #122D4A;
  --navy4:    #1A3A5C;

  --surface:  #0F2840;
  --surface2: #142F4F;
  --surface3: #1A3A62;

  --border:   rgba(255,255,255,.08);
  --border2:  rgba(255,255,255,.13);

  --text:     #F1F5F9;
  --text-b:   #CBD5E1;
  --text-c:   #64748B;
  --text-d:   #334155;

  --green:    #10B981;
  --indigo:   #6366F1;
  --red:      #EF4444;

  --f: 'Inter', system-ui, -apple-system, sans-serif;

  --topbar: 56px;
  --bottombar: 80px;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body {
  height:100%; overflow:hidden;
  font-family:var(--f);
  background:var(--navy);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* ── Layout — three rows, fixed height ──────────────────────────────────── */
.app {
  display:grid;
  grid-template-rows:var(--topbar) 1fr var(--bottombar);
  height:100dvh;
  max-width:900px;
  margin:0 auto;
  position:relative;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  height:var(--topbar);
  background:var(--navy);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  padding:0 16px; gap:12px;
  position:relative; z-index:10;
}
.tb-logo {
  display:flex; align-items:center; gap:9px;
  flex-shrink:0;
}
.tb-sunmark {
  width:30px; height:30px; flex-shrink:0;
}
.tb-name {
  font-size:18px; font-weight:800;
  color:var(--text); letter-spacing:-.4px;
}
.tb-name span { color:var(--sun); }
.tb-modules {
  display:flex; align-items:center; gap:6px;
  flex:1; overflow-x:auto; scrollbar-width:none;
  padding:0 4px;
}
.tb-modules::-webkit-scrollbar { display:none; }
.mod-pill {
  flex-shrink:0;
  font-size:11px; font-weight:600;
  padding:4px 10px; border-radius:20px;
  border:1px solid var(--border2);
  color:var(--text-b);
  background:var(--surface2);
  cursor:default;
  transition:border-color .15s, color .15s;
  white-space:nowrap;
}
.mod-pill.active {
  border-color:var(--sun);
  color:var(--sun);
  background:var(--sun-tint);
}
.tb-account {
  flex-shrink:0; margin-left:auto;
  display:flex; align-items:center; gap:8px;
}
.tb-avatar {
  width:30px; height:30px; border-radius:50%;
  background:var(--surface3);
  border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--sun);
  cursor:pointer;
}
.tb-shop {
  font-size:12px; font-weight:600;
  color:var(--text-c);
  max-width:120px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}

/* ── Chat area ───────────────────────────────────────────────────────────── */
.chat {
  overflow-y:auto; overflow-x:hidden;
  padding:20px 16px 8px;
  display:flex; flex-direction:column;
  gap:16px;
  scroll-behavior:smooth;
}
.chat::-webkit-scrollbar { width:4px; }
.chat::-webkit-scrollbar-track { background:transparent; }
.chat::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:2px; }

/* ── Welcome state ───────────────────────────────────────────────────────── */
.welcome {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  flex:1; text-align:center;
  padding:40px 24px;
  gap:16px;
}
.welcome-sun {
  width:72px; height:72px;
  animation:pulse 3s ease infinite;
}
@keyframes pulse {
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.8;transform:scale(.96);}
}
.welcome h1 {
  font-size:28px; font-weight:800;
  color:var(--text); letter-spacing:-.5px;
}
.welcome h1 span { color:var(--sun); }
.welcome p {
  font-size:15px; color:var(--text-b);
  line-height:1.7; max-width:360px;
}
.welcome-chips {
  display:flex; flex-wrap:wrap;
  gap:8px; justify-content:center;
  margin-top:8px;
}
.chip {
  font-size:13px; font-weight:500;
  padding:8px 14px; border-radius:20px;
  background:var(--surface2);
  border:1px solid var(--border2);
  color:var(--text-b);
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.chip:hover {
  border-color:var(--sun);
  color:var(--sun);
  background:var(--sun-tint);
}

/* ── Message bubbles ─────────────────────────────────────────────────────── */
.msg {
  display:flex; flex-direction:column;
  max-width:82%; gap:4px;
  animation:fadeup .25s ease forwards;
}
@keyframes fadeup {
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:none;}
}
.msg.user { align-self:flex-end; align-items:flex-end; }
.msg.sunny { align-self:flex-start; align-items:flex-start; }

.msg-label {
  font-size:10px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--text-d); padding:0 4px;
}

.bubble {
  padding:12px 16px;
  border-radius:16px;
  font-size:14px; line-height:1.65;
  word-break:break-word;
}
.bubble.user-b {
  background:var(--navy4);
  border:1px solid var(--border2);
  color:var(--text);
  border-bottom-right-radius:4px;
}
.bubble.sunny-b {
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text);
  border-bottom-left-radius:4px;
  position:relative;
}
.bubble.sunny-b.thinking {
  display:flex; align-items:center; gap:6px;
  color:var(--text-c); font-style:italic;
}
.think-dots { display:flex; gap:4px; }
.think-dots span {
  width:6px; height:6px; border-radius:50%;
  background:var(--sun); opacity:.5;
  animation:blink 1.2s ease infinite;
}
.think-dots span:nth-child(2){animation-delay:.2s;}
.think-dots span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,100%{opacity:.3;}50%{opacity:1;}}

/* ── Inline cards — parts, specs, recalls ────────────────────────────────── */
.info-card {
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:12px; overflow:hidden;
  margin-top:6px; width:100%;
  max-width:480px;
}
.ic-head {
  background:var(--surface3);
  padding:10px 14px;
  display:flex; align-items:center;
  justify-content:space-between;
  font-size:11px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--text-c);
}
.ic-badge {
  font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:4px;
}
.ic-badge.recall { background:rgba(239,68,68,.15); color:#FCA5A5; }
.ic-badge.live   { background:rgba(16,185,129,.15); color:#6EE7B7; }
.ic-badge.stock  { background:rgba(245,158,11,.15); color:var(--sun); }
.ic-rows { padding:0 14px; }
.ic-row {
  display:flex; align-items:center;
  justify-content:space-between;
  padding:9px 0;
  border-bottom:1px solid var(--border);
  font-size:13px;
}
.ic-row:last-child { border-bottom:none; }
.ic-key { color:var(--text-c); }
.ic-val { font-weight:700; color:var(--text); }
.ic-val.warn { color:#FCA5A5; }
.ic-val.ok   { color:#6EE7B7; }
.ic-footer {
  padding:10px 14px;
  background:var(--sun-tint);
  border-top:1px solid rgba(245,158,11,.2);
  font-size:12px; color:var(--sun-dk);
  font-weight:600; line-height:1.5;
}

/* ── Bottom bar ──────────────────────────────────────────────────────────── */
.bottombar {
  height:var(--bottombar);
  background:var(--navy);
  border-top:1px solid var(--border);
  padding:0 12px;
  display:flex; align-items:center; gap:10px;
}

/* PTT button */
.ptt {
  width:48px; height:48px; border-radius:50%;
  background:var(--sun);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  position:relative;
  box-shadow:0 4px 16px var(--sun-glow);
  transition:transform .15s, background .15s;
  -webkit-tap-highlight-color:transparent;
}
.ptt:hover { transform:scale(1.07); }
.ptt:active, .ptt.listening {
  background:var(--sun-dk);
  transform:scale(1.12);
}
.ptt.listening::before, .ptt.listening::after {
  content:''; position:absolute;
  inset:-6px; border-radius:50%;
  background:var(--sun); opacity:.25;
  animation:ripple 1.2s ease infinite;
}
.ptt.listening::after { animation-delay:.4s; }
@keyframes ripple {
  0%{transform:scale(1);opacity:.25;}
  100%{transform:scale(1.8);opacity:0;}
}
.ptt svg { width:22px; height:22px; position:relative; z-index:1; }

/* Text input row */
.input-row {
  flex:1; display:flex; align-items:center;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:24px;
  padding:0 14px 0 16px;
  gap:8px;
  transition:border-color .15s;
}
.input-row:focus-within { border-color:var(--sun); }
.chat-input {
  flex:1; background:none; border:none; outline:none;
  font-family:var(--f); font-size:14px;
  color:var(--text); caret-color:var(--sun);
  padding:12px 0;
  resize:none; max-height:80px;
  line-height:1.5;
}
.chat-input::placeholder { color:var(--text-d); }
.send-btn {
  width:32px; height:32px; border-radius:50%;
  background:var(--sun); border:none;
  cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .15s;
  opacity:0; transform:scale(.7);
  transition:opacity .2s, transform .2s, background .15s;
}
.send-btn.visible { opacity:1; transform:scale(1); }
.send-btn:hover { background:var(--sun-dk); }
.send-btn svg { width:16px; height:16px; }

/* Language indicator */
.lang-ind {
  flex-shrink:0;
  font-size:10px; font-weight:700;
  letter-spacing:.8px; text-transform:uppercase;
  color:var(--text-d);
  display:flex; align-items:center; gap:5px;
  cursor:pointer;
  padding:6px 8px; border-radius:8px;
  border:1px solid transparent;
  transition:border-color .15s, color .15s;
}
.lang-ind:hover { border-color:var(--border2); color:var(--text-b); }
.lang-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--green);
  animation:blink 3s ease infinite;
}

/* ── Waveform (listening state) ──────────────────────────────────────────── */
.waveform {
  display:none; align-items:center;
  gap:3px; height:28px;
}
.waveform.active { display:flex; }
.wv { width:3px; border-radius:2px; background:var(--sun); }
.wv:nth-child(1){animation:wave .7s .0s ease infinite;}
.wv:nth-child(2){animation:wave .7s .1s ease infinite;}
.wv:nth-child(3){animation:wave .7s .2s ease infinite;}
.wv:nth-child(4){animation:wave .7s .3s ease infinite;}
.wv:nth-child(5){animation:wave .7s .4s ease infinite;}
.wv:nth-child(6){animation:wave .7s .15s ease infinite;}
.wv:nth-child(7){animation:wave .7s .25s ease infinite;}
@keyframes wave{0%,100%{height:4px;}50%{height:22px;}}

/* ── Markdown rendering inside Sunny bubbles ─────────────────────────────── */
.bubble.sunny-b h1, .bubble.sunny-b h2, .bubble.sunny-b h3 {
  font-size:14px; font-weight:700; color:var(--text);
  margin:10px 0 4px; line-height:1.3;
}
.bubble.sunny-b h1 { font-size:15px; }
.bubble.sunny-b p { margin:0 0 8px; }
.bubble.sunny-b p:last-child { margin-bottom:0; }
.bubble.sunny-b strong { font-weight:700; color:var(--text); }
.bubble.sunny-b em { font-style:italic; color:var(--text-b); }
.bubble.sunny-b ol, .bubble.sunny-b ul {
  padding-left:18px; margin:6px 0;
  display:flex; flex-direction:column; gap:4px;
}
.bubble.sunny-b ol { list-style:decimal; }
.bubble.sunny-b ul { list-style:disc; }
.bubble.sunny-b li { font-size:14px; line-height:1.5; }
.bubble.sunny-b a { color:var(--sun); text-decoration:underline; }
.bubble.sunny-b code {
  font-size:12px; background:rgba(255,255,255,.08);
  padding:1px 5px; border-radius:4px;
  font-family:monospace;
}
.bubble.sunny-b hr {
  border:none; border-top:1px solid var(--border);
  margin:10px 0;
}

/* ── Scrollbar styling ───────────────────────────────────────────────────── */
* { scrollbar-width:thin; scrollbar-color:var(--surface3) transparent; }

/* ── Mobile safe area ────────────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottombar { padding-bottom:calc(8px + env(safe-area-inset-bottom)); height:calc(var(--bottombar) + env(safe-area-inset-bottom)); }
}