:root{--bg:#FFFFFF;--shell:#ADD7F7;--ink:#000000;--pill:#393836;--pill-ink:#FFFFFF;--border:#EDEDED}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:transparent;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

#__next{padding:0}

.chat-wrapper{display:flex;max-width:600px;width:100%;padding:8px 8px 7px;flex-direction:column;align-items:stretch;gap:0;align-self:stretch;border-radius:24px;background:rgba(255,255,255,0.7);margin:0 auto;border:1px solid rgba(255,255,255,0.5);box-shadow:0px 8px 20px rgba(0,0,0,0.08);position:relative;overflow:hidden;height:480px}

.chat-container{flex:1 1 auto;min-height:0;width:100%;align-self:stretch;border-radius:16px;background:transparent;padding:18px 18px 0 18px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;border:none;-ms-overflow-style:none;scrollbar-width:none}
.chat-container::-webkit-scrollbar{display:none}

#messages{display:flex;flex-direction:column;gap:12px}

.message{display:flex;max-width:85%}
.message.user{align-self:flex-end;justify-content:flex-end}
.bubble{padding:10px 12px;border-radius:12px;font-size:15px;line-height:1.35;box-shadow:0 2px 8px rgba(0,0,0,0.08);word-break:break-word;overflow-wrap:anywhere}
.user .bubble{background:rgba(255,255,255,0.5);color:#3051CC;border:1px solid #eee}
.bot .bubble{background:rgba(205,231,250,0.5);color:#111;border:1px solid #CDE7FA}

/* Ensure bot/thinking bubbles have the same perceived inner padding as user bubbles */
.message.thinking .bubble{padding:15px 15px;background:#B0D9F7}
.bot .bubble > :first-child{margin-top:0}
.bot .bubble > :last-child{margin-bottom:0}

.prompt-suggestion{min-height:42px;display:flex;align-items:center;gap:8px;opacity:1;transition:opacity .3s ease,height .3s ease;pointer-events:auto;overflow:visible;margin-bottom:0;margin-top:auto}
.prompt-suggestion.hidden{height:0;opacity:0;pointer-events:none}
.prompt-list{display:flex;flex-direction:column;gap:12px;align-items:flex-start;width:100%}
.prompt-list,.prompt-bubble{min-width:0}
.prompt-bubble{display:inline-block;padding:14.4px 16px;border-radius:14px;background:linear-gradient(180deg,#EAF5FE 0%,#F3F9FE 100%);color:#3051CC;border:none;font-size:16px;font-weight:400;cursor:pointer;transition:transform .15s ease, background .2s ease;max-width:100%;align-self:flex-start;text-align:left;white-space:normal;overflow-wrap:anywhere;word-break:break-word;box-shadow:0 2px 8px rgba(1,39,192,0.05)}
.prompt-bubble:hover{transform:translateY(-1px);background:linear-gradient(180deg,#EAF5FE 0%,#F3F9FE 100%)}

/* fade-out when swapping questions */
.prompt-pill.fade-out{animation:fadeOut .25s ease forwards}
@keyframes fadeOut{to{opacity:0;transform:translateY(4px)}}

@keyframes promptIn{to{opacity:1;transform:none}}

.input-row{display:flex;align-items:center;gap:8px;width:calc(100% - (2 * (16px * 1.2)));margin:calc(16px * 1.2)}
.input-shell{display:flex;padding:6px;justify-content:flex-end;align-items:flex-start;gap:10px;flex:1 0 calc(100% - 61px);border-radius:16px;background:rgba(255,255,255,0.8)}
.input-shell input{flex:1;border:none;outline:none;background:transparent;padding:12px;font-size:16px;font-weight:500;color:#000;width:100%;min-width:0}

.send-btn{width:53px;height:53px;border-radius:16px;border:none;background:#2570E9;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease,opacity .2s ease;transform:scale(1);opacity:1;padding:0;flex-shrink:0;box-shadow:inset 0 6px 14px #178BE3}
.send-btn:hover{transform:scale(1.03)}
.send-btn svg path{fill:#FFFFFF;fill-opacity:1}

@media (max-width:640px){
  #__next{padding:0}
  .chat-wrapper{height:70vh}
  .chat-container{flex:1 1 auto;min-height:0}
}

/* Animated thinking text shimmer */
.message.thinking .bubble{position:relative}
.message.thinking .thinking-text{
  background: linear-gradient(90deg, #1f4bb3 0%, rgba(31,75,179,0.35) 35%, #1f4bb3 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: thinkingShimmer 1.1s linear infinite;
  font-weight: 500;
}
@keyframes thinkingShimmer{
  0%{ background-position: 200% 0 }
  100%{ background-position: -200% 0 }
}