/* v0.31.1 composer: one rounded box that starts at a single line and grows, with its tools in a row inside.
   Loaded last so these rules settle the composer styles spread across the older stylesheets. */
body #composer{display:flex;flex-direction:column;gap:4px;width:100%;padding:12px 10px 8px;border:1px solid #d9dee7;border-radius:24px;background:#fff;box-shadow:0 1px 2px #0f172a0d,0 8px 28px #0f172a0f;transition:border-color .15s,box-shadow .15s}
body #composer:focus-within{border-color:#b7c2d4;box-shadow:0 1px 2px #0f172a12,0 10px 32px #0f172a17}
body #composer.dragging-files{background:#f0f6ff;outline:2px dashed #7c9ad6;outline-offset:3px}
body #composer #message-input{display:block;width:100%;min-height:30px;height:30px;max-height:none;margin:0;padding:4px 6px;border:0;border-radius:0;background:transparent;color:#1f2937;font-size:16px;line-height:22px;letter-spacing:-.02em;overflow-wrap:anywhere;resize:none;outline:none;box-shadow:none}
body #composer #message-input::placeholder{color:#8a94a6}
body #composer .compose-bottom{display:flex;align-items:center;gap:8px;min-height:36px;color:#6b7280}
body #composer #compose-scope{flex:1;min-width:0;margin:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #composer .compose-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
body #composer :is(.composer-tool,.mic-button,.send-button){display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;margin:0;padding:0;border:0;border-radius:50%;font-size:20px;line-height:1;box-shadow:none}
body #composer :is(.composer-tool,.mic-button,.send-button):disabled{opacity:.4;cursor:default}
body #composer .attach-button{border:1px solid #d9dee7;background:#fff;color:#374151;font-size:22px;font-weight:300}
body #composer .mic-button:not(.recording){background:transparent;color:#4b5563}
body #composer .mic-button svg{width:20px;height:20px}
body #composer :is(.attach-button,.mic-button:not(.recording)):hover:not(:disabled){background:#f1f3f6}
body #composer .mic-button.recording{background:#ffedf0;color:#c6434a}
body #composer .voice-conversation{background:#1f2937;color:#fff}
body #composer .voice-conversation .voice-bars{height:16px;gap:2px}
body #composer .voice-conversation .voice-bars i{width:2.2px;height:7px}
body #composer .voice-conversation .voice-bars i:nth-child(2),body #composer .voice-conversation .voice-bars i:nth-child(4){height:12px}
body #composer .voice-conversation .voice-bars i:nth-child(3){height:16px}
body #composer .send-button{background:#2563eb;color:#fff;font-weight:600}
body #composer .send-button:hover:not(:disabled){background:#1d4ed8}
body #composer .stop-response{background:#1f2937;color:#fff;font-size:13px}
/* An empty box offers voice in the send position; typed text or an attachment brings the send arrow back.
   While voice is unavailable or the composer is locked, the send arrow stays and only looks inactive. */
body #composer:has(#message-input:placeholder-shown):has(#attachment-previews[hidden]):has(.voice-conversation:enabled) .send-button{display:none}
body #composer:is(:not(:has(#message-input:placeholder-shown)),:not(:has(#attachment-previews[hidden])),:has(.voice-conversation:disabled)) .voice-conversation{display:none}
body #composer:has(#message-input:placeholder-shown):has(#attachment-previews[hidden]) .send-button{background:#c3cfe2}
@media(max-width:650px){
  /* Narrow screens give the text as much of the width as they can. 16px stays the font size so iOS does not zoom. */
  body:is([data-screen=chat],[data-screen=project]) .compose-wrap{padding-left:8px;padding-right:8px}
  body #composer{padding:10px 6px 6px;border-radius:22px}
  body #composer #message-input{padding:4px}
  body:not(.chat-input-active) #composer #compose-scope{visibility:hidden}
  body #composer #compose-scope{font-size:11px}
}
@media(pointer:coarse){body #composer :is(.composer-tool,.mic-button,.send-button){width:38px;height:38px;flex-basis:38px}}
/* Top bar location: larger labels (home.css) and a fade where a long path continues. */
body .hub-nav .hub-crumbs.overflowing{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
/* Messages on the chat screens appear under the top bar instead of over the composer. */
body:is([data-screen=chat],[data-screen=project]) #toast{top:calc(var(--app-viewport-top,0px) + 72px);bottom:auto}
/* v0.32.0: why an answer failed, under the question; and the new-version notice. */
body .message-failure{margin:6px 0 0;font-size:13px;line-height:1.5;color:#8a5a12;overflow-wrap:anywhere}
body .update-banner{position:fixed;z-index:120;left:50%;transform:translateX(-50%);top:calc(var(--app-viewport-top,0px) + 10px);display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 24px);white-space:nowrap;padding:8px 8px 8px 16px;border-radius:14px;background:#1f2937;color:#fff;font-size:14px;box-shadow:0 8px 28px #0f172a33}
body .update-banner button{min-height:36px;padding:6px 14px;border-radius:10px;background:#fff;color:#1f2937;font-weight:600}
/* v0.34.0: the conversation offered after a new one started (reconnect rule C). */
body .resume-choice{display:grid;justify-items:start;gap:8px;margin-top:18px}
body .resume-choice p{margin:0;font-size:13px;color:#6b7280}
body .resume-chip{max-width:100%;min-height:40px;padding:8px 16px;border:1px solid #c9d6ea;border-radius:20px;background:#f0f6ff;color:#1d4ed8;font-size:15px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body .resume-chip:hover{background:#e3eeff}
/* v0.36.0 conversation, Claude-style: the question in a bubble on the right, the answer as plain text, tight lines.
   The speaker head stays in the page for screen readers and is hidden here; the answer's model and time sit with its actions. */
body .messages .message{max-width:100%;margin:0 0 12px}
body .messages .message .message-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body .messages .message.user{display:flex;flex-direction:column;align-items:flex-end;margin-left:12%}
body .messages .message.user .message-content{display:block;max-width:100%;margin:0;padding:7px 13px;border-radius:18px 18px 6px 18px;background:#eef2f7;color:#1f2937;font-size:16px;line-height:1.38;white-space:pre-wrap;text-align:left}
body .messages .message.user .message-attachments{justify-content:flex-end;margin-bottom:6px}
body .messages .message.assistant .message-content{margin:0;padding:0;border-radius:0;background:transparent;color:#1f2937;font-size:16px;line-height:1.42}
body .messages .message-actions{gap:10px;min-height:0;margin-top:2px;font-size:12px}
body .messages .message-actions:empty{display:none}
body .messages .message.user .message-actions{justify-content:flex-end}
body .messages .message-actions button{min-height:28px;padding:2px 0;font-size:12px}
body .messages .message-meta{color:#8a94a6;font-size:11px;white-space:nowrap}
body .messages .message.user .message-failure{max-width:100%;text-align:right}
body .messages .rich{white-space:normal}
body .messages .rich>:first-child{margin-top:0}
body .messages .rich>:last-child{margin-bottom:0}
body .messages .rich p{margin:0 0 .4em}
body .messages .rich .rich-heading{margin:.7em 0 .2em;font-weight:700;font-size:1.04em}
body .messages .rich :is(ul,ol){margin:.15em 0 .45em;padding-left:1.35em}
body .messages .rich li{margin:.05em 0}
body .messages .rich hr{margin:.7em 0;border:0;border-top:1px solid #e5e7eb}
body .messages .rich pre{margin:.4em 0 .6em;padding:10px 12px;border-radius:8px;background:#f5f6f8;font-size:13px;line-height:1.45;white-space:pre;overflow-x:auto}
body .messages .rich code{padding:0 4px;border-radius:4px;background:#f1f3f5;font-size:.92em}
body .messages .rich pre code{padding:0;background:transparent;font-size:inherit}
/* An answer in progress is a status line with its stop button, the wait below and the text as it arrives, not a boxed card.
   The question's own "답변 생성 중" note gives way to it. */
body .messages .chat-job{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:0 0 12px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
body .messages .chat-job strong{order:1;font-size:14px;font-weight:600;color:#4b5563}
body .messages .chat-job>button{order:2;min-height:28px;margin:0;padding:2px 12px;border:1px solid #d9dee7;border-radius:14px;background:#fff;color:#4b5563;font-size:12px}
body .messages .chat-job small{order:3;flex-basis:100%;margin:0;font-size:12px;line-height:1.4;color:#8a94a6}
body .messages .chat-job .message-content{order:4;flex-basis:100%;margin:4px 0 0;padding:0;background:transparent;color:#1f2937;font-size:16px;line-height:1.42}
body .messages .message.user:has(~ .chat-job) .message-status{display:none}
body .messages .chat-job>button.primary{order:5;border-color:#2563eb;background:#2563eb;color:#fff}
@media(max-width:650px){body .messages .message.user{margin-left:10%}}
/* v0.45.1: no press effect at all; buttons change the screen at once. */
.messages .chat-pending{margin:40px auto;color:#64748b;font-size:14px;text-align:center}
/* v0.43.0: Jarvis's hint about handing work to the specialists. */
.welcome .welcome-hint{max-width:520px;margin:10px auto 0;padding:10px 14px;border-radius:12px;background:#f1f5f9;color:#475569;font-size:13px;line-height:1.5}
/* v0.45.1: the day whose events are shown below the calendar. */
.calendar-day.selected{box-shadow:inset 0 0 0 2px #2563eb;background:#eef3ff}
/* The add button next to the date, clear of the floating Jarvis button at the right. */
#schedule-list .schedule-day-heading{justify-content:flex-start}
/* v0.46.0: links in answers (a searched answer's sources). */
.message-content.rich a{color:#2563eb;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
