/* ═══════════════════════════════════════
   ROOT  —  Utshob AI · Arctic Sky
   Signature: #40C4F4 sky blue as the
   single dominant accent, built on a
   crisp white + cool grey canvas with
   deep navy ink — clean, confident,
   entirely original.
═══════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root {
  /* ── backgrounds: clean arctic canvas ── */
  --bg:           #F4F8FC;
  --sidebar-bg:   #EBF2F8;
  --surface:      #FFFFFF;
  --surface2:     #EEF5FB;
 
  /* ── borders: sky-tinted cool grey ── */
  --border:       #D4E4F0;
  --border2:      #B8D0E8;
 
  /* ── text: deep navy ink ── */
  --text:         #0D1B2A;
  --text-2:       #3D5A73;
  --text-3:       #8AAABF;
 
  /* ── Utshob AI Signature: Arctic Sky Blue ── */
  --coral:        #40C4F4;           /* primary — sky blue             */
  --coral-light:  #6ED4F8;
  --coral-pale:   rgba(64,196,244,0.10);
  --coral-mid:    rgba(64,196,244,0.24);
  --amber:        #0B7DBB;           /* secondary — deep sapphire      */
  --amber-pale:   rgba(11,125,187,0.10);
 
  /* ── gradient: deep ocean → sky → ice ── */
  --grad:         linear-gradient(135deg,#0B7DBB 0%,#40C4F4 55%,#A8E6F8 100%);
  --grad-subtle:  linear-gradient(135deg,rgba(64,196,244,0.12) 0%,rgba(11,125,187,0.05) 100%);
 
  /* ── bubbles ── */
  --bubble-user:  #0D1B2A;
  --bubble-ai:    #FFFFFF;
 
  /* ── shadows: airy, soft depth ── */
  --shadow:       0 1px 3px rgba(13,27,42,0.06),0 4px 14px rgba(13,27,42,0.05);
  --shadow-md:    0 4px 20px rgba(13,27,42,0.09);
  --shadow-lg:    0 8px 36px rgba(13,27,42,0.12);
 
  --radius:       16px;
  --radius-sm:    10px;
  --radius-xs:    6px;
  --f-sans:       'DM Sans',system-ui,sans-serif;
  --f-serif:      'Lora',Georgia,serif;
  --sidebar-w:    264px;
}
 
html,body{height:100%;overflow:hidden;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-sans);
  font-size:14px;
  line-height:1.6;
  display:flex;
}
 
/* ═══════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════ */
.sidebar{
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  flex-shrink:0;height:100vh;overflow:hidden;
  animation:fadeIn .35s ease;
}
.sidebar-header{
  padding:14px 14px 12px;
  border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px;
}
.sidebar-brand{
  display:flex;align-items:center;gap:8px;
  padding:4px 4px 2px;
}
.brand-mark{
  width:28px;height:28px;border-radius:8px;
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;
  flex-shrink:0;
}
.brand-name{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.01em;}
.brand-model{font-size:11px;color:var(--text-3);font-weight:400;}
 
.new-chat-btn{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:8px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-2);
  font-family:var(--f-sans);font-size:13px;font-weight:500;
  cursor:pointer;text-align:left;
  transition:all .15s;
}
.new-chat-btn:hover{background:var(--bg);border-color:var(--border2);color:var(--text);}
.new-chat-btn svg{opacity:.45;flex-shrink:0;}
 
.sidebar-label{
  padding:14px 14px 5px;
  font-size:10px;font-weight:700;color:var(--text-3);
  letter-spacing:.08em;text-transform:uppercase;
}
.chat-history{
  flex:1;overflow-y:auto;padding:0 6px 8px;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.chat-history::-webkit-scrollbar{width:3px;}
.chat-history::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
 
.hist-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:var(--radius-sm);
  cursor:pointer;color:var(--text-2);font-size:13px;
  transition:background .15s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hist-item:hover{background:rgba(64,196,244,.08);}
.hist-item.active{
  background:var(--surface);color:var(--text);font-weight:500;
  border:1px solid var(--border);box-shadow:var(--shadow);
}
.hist-item svg{flex-shrink:0;opacity:.35;}
.hist-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 
.sidebar-footer{
  padding:10px 14px 14px;
  border-top:1px solid var(--border);
}
.user-tile{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--radius-sm);
  cursor:pointer;transition:background .15s;
}
.user-tile:hover{background:rgba(64,196,244,.08);}
.user-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;flex-shrink:0;
}
.user-name{font-size:13px;font-weight:600;color:var(--text);}
.user-plan{font-size:11px;color:var(--text-3);}
 
/* ═══════════════════════════════════════
   MAIN
═══════════════════════════════════════ */
.main{
  flex:1;display:flex;flex-direction:column;
  height:100vh;overflow:hidden;position:relative;
  animation:fadeIn .35s ease .05s both;
}
 
/* ── topbar ── */
.topbar{
  padding:11px 20px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  justify-content:space-between;gap:12px;
  background:rgba(244,248,252,0.92);
  backdrop-filter:blur(16px);
  flex-shrink:0;
}
.model-pill{
  display:flex;align-items:center;gap:8px;
  padding:5px 12px;
  border:1px solid var(--border);border-radius:40px;
  background:var(--surface);cursor:pointer;
  font-size:13px;font-weight:600;color:var(--text);
  transition:all .15s;user-select:none;
}
.model-pill:hover{border-color:var(--coral);background:var(--coral-pale);}
.model-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--grad);flex-shrink:0;
  box-shadow:0 0 6px rgba(64,196,244,.5);
}
.model-chevron{font-size:10px;opacity:.4;margin-left:2px;}
.topbar-badge{
  font-size:10px;font-weight:700;
  padding:2px 9px;border-radius:40px;
  background:var(--coral-pale);color:var(--coral);
  border:1px solid var(--coral-mid);
  letter-spacing:.04em;
}
.topbar-right{display:flex;gap:4px;}
.icon-btn{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-xs);cursor:pointer;
  color:var(--text-3);border:none;background:none;
  transition:all .15s;
}
.icon-btn:hover{background:var(--border);color:var(--text-2);}
 
/* ── chat area ── */
.chat-area{
  flex:1;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
  scroll-behavior:smooth;
}
.chat-area::-webkit-scrollbar{width:4px;}
.chat-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
 
/* ═══════════════════════════════════════
   WELCOME SCREEN  (stays visible on load)
═══════════════════════════════════════ */
#welcomeScreen{
  max-width:680px;margin:0 auto;
  padding:52px 24px 36px;
  text-align:center;
  transition:opacity .4s ease;
}
/* avatar + countdown ring container */
.w-avatar-wrap{
  position:relative;width:84px;height:84px;
  margin:0 auto 22px;
}
.w-avatar{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:800;color:#fff;
  font-family:var(--f-sans);
  box-shadow:0 4px 24px rgba(64,196,244,.30);
}
.cdown-svg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
  transform:rotate(-90deg);
}
.cdown-track{fill:none;stroke:var(--border);stroke-width:2;}
.cdown-arc{
  fill:none;stroke:var(--coral);stroke-width:2.8;
  stroke-linecap:round;
  stroke-dasharray:251.3;   /* 2π×40 */
  stroke-dashoffset:251.3;  /* starts empty, fills as timer counts */
}
.cdown-num{
  position:absolute;bottom:-4px;right:-2px;
  width:20px;height:20px;border-radius:50%;
  background:var(--coral);color:#fff;
  font-size:9px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 6px rgba(64,196,244,.50);
  font-family:var(--f-sans);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cdown-num.pulse{transform:scale(1.25);}
 
.w-title{
  font-family:var(--f-serif);
  font-size:26px;font-weight:500;
  color:var(--text);margin-bottom:8px;line-height:1.25;
}
.w-sub{
  font-size:14.5px;color:var(--text-3);
  margin-bottom:36px;line-height:1.7;max-width:520px;margin-left:auto;margin-right:auto;
}
.w-hint{
  font-size:11px;color:var(--text-3);margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.w-hint::before,.w-hint::after{content:'';flex:1;max-width:60px;height:1px;background:var(--border);}
 
/* prompt cards */
.prompts-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  text-align:left;
}
.p-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;
  cursor:pointer;transition:all .2s;
  display:flex;flex-direction:column;gap:3px;
}
.p-card:hover{
  border-color:var(--coral);
  box-shadow:0 2px 16px rgba(64,196,244,.14);
  transform:translateY(-2px);
}
.p-card:active{transform:translateY(0);}
.p-icon{font-size:18px;margin-bottom:4px;}
.p-title{font-size:13px;font-weight:600;color:var(--text);}
.p-sub{font-size:11px;color:var(--text-3);line-height:1.4;}
 
/* ═══════════════════════════════════════
   MESSAGES
═══════════════════════════════════════ */
#messagesContainer{}
.msgs-wrap{
  max-width:720px;margin:0 auto;
  padding:28px 24px 4px;
}
.msg-group{
  margin-bottom:28px;
  animation:msgIn .28s ease;
}
@keyframes msgIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
 
/* user bubble */
.msg-user{display:flex;justify-content:flex-end;margin-bottom:14px;}
.msg-user-bubble{
  background:var(--bubble-user);color:#fff;
  padding:11px 17px;
  border-radius:18px 18px 4px 18px;
  max-width:72%;font-size:14px;line-height:1.6;
  box-shadow:var(--shadow);
}
 
/* ai row */
.msg-ai{display:flex;gap:12px;align-items:flex-start;}
.msg-ai-ava{
  width:32px;height:32px;border-radius:50%;
  background:var(--grad);flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;
  box-shadow:0 2px 10px rgba(64,196,244,.30);
}
.msg-ai-content{flex:1;}
.msg-ai-name{
  font-size:12px;font-weight:700;color:var(--text-2);
  margin-bottom:5px;display:flex;align-items:center;gap:6px;
}
.verified{
  font-size:9px;font-weight:700;
  background:var(--coral-pale);color:var(--coral);
  padding:1px 7px;border-radius:20px;
  border:1px solid var(--coral-mid);letter-spacing:.04em;
}
.msg-ai-bubble{
  background:var(--bubble-ai);
  border:1px solid var(--border);
  border-radius:4px 18px 18px 18px;
  padding:16px 20px;
  box-shadow:var(--shadow);
  font-size:14px;line-height:1.78;color:var(--text);
}
.msg-ai-bubble h3{
  font-family:var(--f-serif);font-size:17px;font-weight:600;
  margin:0 0 12px;color:var(--text);
}
.msg-ai-bubble p{margin-bottom:11px;color:var(--text-2);}
.msg-ai-bubble p:last-child{margin-bottom:0;}
.msg-ai-bubble strong{color:var(--text);font-weight:600;}
.msg-ai-bubble em{font-family:var(--f-serif);font-style:italic;}
.msg-ai-bubble a{color:var(--coral);text-decoration:none;}
.msg-ai-bubble a:hover{text-decoration:underline;}
 
/* message actions */
.msg-actions{
  display:flex;gap:2px;margin-top:7px;
  opacity:0;transition:opacity .2s;
}
.msg-group:hover .msg-actions{opacity:1;}
.m-act-btn{
  padding:4px 8px;border-radius:var(--radius-xs);
  border:none;background:none;
  font-family:var(--f-sans);font-size:11px;
  color:var(--text-3);cursor:pointer;
  display:flex;align-items:center;gap:4px;
  transition:all .15s;
}
.m-act-btn:hover{background:var(--border);color:var(--text-2);}
 
/* ── rich content ── */
.bubble-cards{
  display:grid;grid-template-columns:1fr 1fr;
  gap:9px;margin-top:14px;
}
.b-card{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:11px 13px;
  transition:border-color .2s;
}
.b-card:hover{border-color:var(--border2);}
.b-lbl{
  font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--coral);margin-bottom:3px;
}
.b-val{font-size:13px;font-weight:500;color:var(--text);line-height:1.3;}
.b-sub{font-size:11px;color:var(--text-3);margin-top:2px;}
 
.pill-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.pill{
  font-size:11px;font-weight:500;
  padding:4px 12px;border-radius:20px;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text-2);cursor:default;transition:all .15s;
}
.pill:hover{border-color:var(--coral);color:var(--coral);background:var(--coral-pale);}
.pill.c{background:var(--coral-pale);border-color:rgba(64,196,244,.30);color:var(--coral);}
.pill.a{background:var(--amber-pale);border-color:rgba(11,125,187,.28);color:var(--amber);}
 
.pub-list{margin-top:12px;display:flex;flex-direction:column;gap:9px;}
.pub-it{
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 14px;background:var(--surface2);
  text-decoration:none;color:inherit;display:block;
  transition:border-color .2s,box-shadow .2s;
}
.pub-it:hover{border-color:var(--coral);box-shadow:0 2px 10px rgba(64,196,244,.10);}
.pub-jrnl{
  font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--coral);margin-bottom:4px;
}
.pub-ttl{font-size:13px;font-weight:500;color:var(--text);line-height:1.4;margin-bottom:3px;}
.pub-meta{font-size:11px;color:var(--text-3);}
 
.award-list{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.aw-it{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 14px;
  transition:border-color .2s;
}
.aw-it:hover{border-color:var(--coral);}
.aw-ico{font-size:20px;flex-shrink:0;line-height:1;}
.aw-name{font-size:13px;font-weight:500;color:var(--text);margin-bottom:2px;}
.aw-org{font-size:11px;color:var(--text-3);}
.aw-yr{font-size:9px;font-weight:800;color:var(--coral);letter-spacing:.08em;margin-top:3px;}
 
.skill-grps{margin-top:12px;display:flex;flex-direction:column;gap:11px;}
.sg-lbl{
  font-size:9px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);margin-bottom:6px;
}
 
/* ── typing indicator ── */
.typing-wrap{
  display:flex;gap:12px;align-items:flex-start;
  max-width:720px;margin:0 auto 24px;
  padding:0 24px;animation:msgIn .28s ease;
}
.typing-bubble{
  background:var(--bubble-ai);border:1px solid var(--border);
  border-radius:4px 18px 18px 18px;
  padding:14px 18px;box-shadow:var(--shadow);
  display:flex;gap:5px;align-items:center;
}
.t-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--text-3);
  animation:tdot 1.3s infinite ease;
}
.t-dot:nth-child(2){animation-delay:.18s;}
.t-dot:nth-child(3){animation-delay:.36s;}
@keyframes tdot{0%,80%,100%{transform:scale(.7);opacity:.35;}40%{transform:scale(1.1);opacity:1;}}
 
/* ── follow-up suggestions ── */
.follow-ups{
  max-width:720px;margin:0 auto 10px;
  padding:0 24px;display:flex;gap:7px;flex-wrap:wrap;
}
.fu-btn{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:5px 13px;
  font-family:var(--f-sans);font-size:12px;
  color:var(--text-2);cursor:pointer;
  display:flex;align-items:center;gap:5px;
  transition:all .15s;
}
.fu-btn:hover{border-color:var(--coral);color:var(--coral);background:var(--coral-pale);}
.fu-arrow{font-size:10px;opacity:.5;}
 
/* ═══════════════════════════════════════
   INPUT AREA
═══════════════════════════════════════ */
.input-area{
  padding:8px 24px 18px;flex-shrink:0;
  background:linear-gradient(to bottom,transparent,var(--bg) 28%);
}
.input-wrap{max-width:720px;margin:0 auto;}
.input-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;box-shadow:var(--shadow-md);
  overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.input-box:focus-within{
  border-color:var(--border2);
  box-shadow:0 4px 24px rgba(0,0,0,.1);
}
.input-row{
  display:flex;align-items:flex-end;gap:8px;
  padding:10px 12px;
}
#chatInput{
  flex:1;border:none;outline:none;resize:none;
  font-family:var(--f-sans);font-size:14px;line-height:1.5;
  color:var(--text);background:transparent;
  max-height:160px;min-height:24px;scrollbar-width:none;
}
#chatInput::placeholder{color:var(--text-3);}
#chatInput::-webkit-scrollbar{display:none;}
 
.send-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--text);border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;flex-shrink:0;color:#fff;
}
.send-btn:hover{background:var(--coral);transform:scale(1.06);box-shadow:0 4px 20px rgba(64,196,244,0.45);}
.send-btn:disabled{background:var(--border2);cursor:not-allowed;transform:none;box-shadow:none;}
.send-btn svg{width:15px;height:15px;fill:currentColor;}
/* sky blue glow on countdown arc */
.cdown-arc{ filter: drop-shadow(0 0 4px rgba(64,196,244,0.65)); }
 
.input-toolbar{
  display:flex;align-items:center;gap:3px;
  padding:5px 10px 9px;border-top:1px solid var(--border);
}
.tb-btn{
  display:flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:var(--radius-xs);
  border:none;background:none;font-family:var(--f-sans);
  font-size:11px;font-weight:500;color:var(--text-3);
  cursor:pointer;transition:all .15s;white-space:nowrap;
}
.tb-btn:hover{background:var(--surface2);color:var(--text-2);}
.tb-spacer{flex:1;}
 
.input-foot{
  text-align:center;font-size:11px;color:var(--text-3);margin-top:8px;
}
.input-foot a{color:var(--coral);text-decoration:none;}
.input-foot a:hover{text-decoration:underline;}
 
/* ═══════════════════════════════════════
   UTILS & ANIMS
═══════════════════════════════════════ */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
 
/* responsive */
@media(max-width:768px){
  .sidebar{display:none;}
  .topbar,.input-area{padding-left:16px;padding-right:16px;}
  .prompts-grid{grid-template-columns:1fr;}
  .bubble-cards{grid-template-columns:1fr;}
  .msgs-wrap,.follow-ups,.typing-wrap{padding-left:16px;padding-right:16px;}
  #welcomeScreen{padding:36px 16px 24px;}
}