:root {
  --ink:#172c36;
  --muted:#667b87;
  --turquoise:#0bb7aa;
  --turquoise-dark:#07988f;
  --slate:#456378;
  --navy:#172f3e;
  --pale:#edf7f6;
  --line:#dfe7e9;
  --white:#fff;
  --yooliz-panel:linear-gradient(150deg, #005b58 0%, #0c4b50 54%, #183747 100%);
}

* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; overflow-x:hidden; font-family:"neuzeit-grotesk", "Avenir Next", Avenir, Arial, sans-serif; color:var(--ink); background:#0bb7aa; }
body { min-height:100vh; }
button, textarea { font:inherit; }
button { color:inherit; }
.app-shell { display:flex; min-height:100vh; }

.sidebar {
  width:292px;
  position:fixed;
  inset:0 auto 0 0;
  padding:22px 22px 26px;
  overflow:hidden;
  color:#fff;
  background:var(--yooliz-panel);
  display:flex;
  flex-direction:column;
  z-index:5;
}
.sidebar::before, .sidebar::after { content:""; position:absolute; pointer-events:none; opacity:.14; transform:rotate(30deg); }
.sidebar::before { width:310px; height:100px; left:-145px; top:145px; background:linear-gradient(90deg, transparent, #0bb7aa); }
.sidebar::after { width:330px; height:80px; right:-220px; bottom:180px; border:1px solid #6ee0d7; }
.sidebar > * { position:relative; z-index:1; }
.brand { display:block; color:#fff; text-decoration:none; width:148px; padding:4px 4px 26px; }
.brand img { display:block; width:100%; height:auto; }
.new-chat {
  width:100%;
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:3px;
  text-align:left;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:.2s ease;
}
.new-chat:hover { background:var(--turquoise); border-color:var(--turquoise); }
.new-chat span { font-size:19px; margin-right:8px; font-weight:400; }
.side-copy { margin-top:37px; padding:0 7px; color:#d4e0e4; line-height:1.6; font-size:13px; }
.eyebrow { text-transform:uppercase; letter-spacing:.16em; font-weight:900; font-size:10px; color:var(--turquoise); }
.official-card { display:flex; gap:11px; align-items:flex-start; margin-top:auto; padding:15px; background:rgba(255,255,255,.08); border-left:3px solid var(--turquoise); font-style:italic; }
.official-card strong, .official-card small { display:block; }
.official-card strong { font-size:12px; letter-spacing:.015em; }
.official-card small { color:#b7c9d0; margin-top:5px; line-height:1.4; font-size:11px; }
.legal-note { color:#8fa7b1; font-size:9px; font-style:italic; line-height:1.55; padding:0 5px; margin-bottom:0; }

.main { margin-left:292px; min-width:0; min-height:100vh; width:calc(100% - 292px); display:flex; flex-direction:column; background:var(--yooliz-panel); }
.topbar { height:72px; padding:0 32px; border-bottom:1px solid rgba(255,255,255,.2); background:rgba(0,75,72,.82); backdrop-filter:blur(16px); display:flex; align-items:center; position:sticky; top:0; z-index:3; }
.topbar::after { content:""; position:absolute; left:0; bottom:-1px; width:72px; height:2px; background:#fff; }
.topbar > div { display:flex; flex-direction:column; gap:3px; }
.topbar strong { color:#fff; font-size:17px; font-weight:900; letter-spacing:.01em; }
.menu { display:none; border:0; background:none; color:#fff; font-size:22px; margin-right:12px; }

.conversation { width:min(840px, calc(100% - 42px)); margin:0 auto; padding:58px 0 174px; flex:1; }
.welcome { text-align:center; animation:rise .45s ease-out; }
.hero-logo { width:190px; margin:0 auto 25px; }
.hero-logo img { display:block; width:100%; height:auto; }
.welcome h1 { font-family:Arial, Helvetica, sans-serif; font-size:clamp(34px, 4.2vw, 52px); line-height:1.1; font-weight:700; margin:0 0 17px; letter-spacing:-.025em; color:#fff; }
.intro { max-width:610px; margin:0 auto; color:rgba(255,255,255,.83); font-family:Arial, Helvetica, sans-serif; line-height:1.65; font-size:15px; font-weight:400; }
.suggestions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:30px; text-align:left; }
.suggestion { position:relative; min-width:0; padding:20px 18px 18px; min-height:91px; border:1px solid rgba(255,255,255,.5); border-radius:4px; background:rgba(255,255,255,.96); cursor:pointer; transition:.2s ease; overflow:hidden; text-align:center; }
.suggestion::after { content:""; position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--turquoise); transition:.2s ease; }
.suggestion:hover { transform:translateY(-2px); border-color:#aad7d3; box-shadow:0 10px 28px rgba(31,69,82,.08); }
.suggestion:hover::after { width:100%; }
.suggestion b, .suggestion small { display:block; }
.suggestion b { font-family:Arial, Helvetica, sans-serif; font-size:14px; margin-bottom:7px; font-weight:700; text-transform:none; letter-spacing:0; }
.suggestion small { color:var(--muted); font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:1.4; font-weight:400; }

.messages { display:flex; flex-direction:column; gap:28px; }
.message { display:flex; gap:14px; line-height:1.68; font-size:14px; }
.message.user { justify-content:flex-end; }
.message.user .bubble { max-width:78%; color:#fff; background:linear-gradient(135deg, var(--slate), #294b5e); border-radius:14px 14px 2px 14px; padding:13px 17px; white-space:pre-wrap; }
.assistant-icon { flex:0 0 52px; width:52px; margin-top:3px; }
.assistant-icon img { display:block; width:100%; height:auto; }
.assistant-content { min-width:0; width:100%; }
.assistant-content .answer { color:#fff; white-space:pre-wrap; }
.web-badge { display:inline-flex; align-items:center; gap:7px; margin-bottom:10px; padding:5px 9px; border:1px solid rgba(255,255,255,.42); border-radius:999px; color:#fff; background:rgba(0,71,69,.25); font-size:10px; font-weight:700; letter-spacing:.02em; }
.web-badge svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; }
.sources { margin-top:19px; border-top:1px solid rgba(255,255,255,.3); padding-top:13px; }
.sources strong { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.13em; color:rgba(255,255,255,.82); margin-bottom:8px; }
.sources a { display:inline-flex; max-width:100%; margin:3px 6px 3px 0; padding:6px 10px; border:1px solid #cfe0e2; border-radius:2px; color:var(--turquoise-dark); background:#fff; font-size:11px; font-weight:700; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sources a:hover { color:#fff; background:var(--turquoise); border-color:var(--turquoise); }
.typing { color:#fff; display:flex; align-items:center; gap:5px; padding-top:5px; }
.typing i { width:6px; height:6px; background:#fff; border-radius:50%; animation:pulse 1s infinite alternate; }
.typing i:nth-child(2) { animation-delay:.2s; }.typing i:nth-child(3) { animation-delay:.4s; }
.web-status { display:inline-flex; align-items:center; gap:10px; width:max-content; max-width:100%; padding:7px 12px 7px 7px; border:1px solid rgba(255,255,255,.38); border-radius:999px; color:#fff; background:rgba(0,71,69,.27); font-size:12px; font-weight:700; }
.web-icon { width:31px; height:31px; flex:0 0 31px; display:grid; place-items:center; border-radius:50%; color:#078f88; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.45); animation:web-pulse 1.5s ease-out infinite; }
.web-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
.web-dots { display:flex; gap:3px; }
.web-dots i { width:4px; height:4px; border-radius:50%; background:#fff; animation:pulse .8s infinite alternate; }
.web-dots i:nth-child(2) { animation-delay:.16s; }.web-dots i:nth-child(3) { animation-delay:.32s; }
.error { color:#7d3a35; background:#fff2f0; border-left:3px solid #d8766c; padding:11px 14px; }
.error .answer { color:#7d3a35; }

.composer-wrap { position:fixed; bottom:0; left:292px; right:0; padding:19px 24px 12px; background:linear-gradient(transparent, rgba(12,75,80,.93) 27%, #0c4b50); z-index:4; }
.composer { width:min(840px, 100%); margin:auto; min-height:60px; padding:9px 9px 9px 19px; display:flex; align-items:flex-end; gap:10px; background:#fff; border:1px solid #cbd9dc; border-radius:4px; box-shadow:0 12px 32px rgba(27,57,70,.09); }
.composer:focus-within { border-color:var(--turquoise); box-shadow:0 12px 32px rgba(27,57,70,.11), 0 0 0 3px rgba(11,183,170,.09); }
.composer textarea { flex:1; resize:none; border:0; outline:0; padding:10px 0; max-height:150px; color:var(--ink); background:transparent; line-height:1.45; }
.composer textarea::placeholder { color:#8b9ba2; }
.composer button { width:42px; height:42px; flex:0 0 42px; border:0; border-radius:0; color:#fff; background:var(--turquoise); font-size:22px; cursor:pointer; transition:.2s ease; }
.composer button:hover { background:var(--turquoise-dark); }
.composer button:disabled { opacity:.4; cursor:default; }
.composer-wrap > p { text-align:center; color:rgba(255,255,255,.72); font-size:9px; margin:9px 0 0; }

@keyframes pulse { to { opacity:.25; transform:translateY(-2px); } }
@keyframes rise { from { opacity:0; transform:translateY(8px); } }
@keyframes web-pulse { 70% { box-shadow:0 0 0 8px rgba(255,255,255,0); } 100% { box-shadow:0 0 0 0 rgba(255,255,255,0); } }

@media (max-width:760px) {
  .sidebar { transform:translateX(-100%); transition:.25s; box-shadow:10px 0 40px rgba(0,0,0,.2); }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; width:100%; }
  .composer-wrap { left:0; padding-inline:12px; }
  .menu { display:block; cursor:pointer; }
  .conversation { width:calc(100% - 32px); padding-top:36px; }
  .suggestions { grid-template-columns:1fr; }
  .welcome h1 { max-width:100%; font-size:31px; line-height:1.12; overflow-wrap:anywhere; }
}