.chat-app{--chat-width:46rem;background:var(--color-bg);grid-template-rows:auto 1fr auto;block-size:100dvh;display:grid}.chat-header{justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) max(var(--space-4), env(safe-area-inset-right)) var(--space-3) max(var(--space-4), env(safe-area-inset-left));border-block-end:1px solid var(--color-border);background:color-mix(in oklab, var(--color-bg) 85%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-block-start:calc(env(safe-area-inset-top) + var(--space-3));display:flex}.chat-header h1{font-size:var(--text-lg);line-height:1.2}.chat-title{align-items:center;gap:var(--space-3);display:flex}.chat-logo{border-radius:var(--radius-sm)}.chat-status{align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-size:.8125rem;display:flex}.chat-status:before{content:"";background:currentColor;border-radius:50%;block-size:.5rem;inline-size:.5rem}.chat-status-ready:before{background:var(--color-success)}.chat-status-waiting:before{background:var(--color-warning);animation:1.2s ease-in-out infinite chat-pulse}.chat-status-offline:before{background:var(--color-text-muted)}.chat-status-error{color:var(--color-danger)}.chat-account{position:relative}.chat-account summary{background:var(--color-surface-muted);cursor:pointer;border-radius:50%;place-items:center;block-size:2.25rem;inline-size:2.25rem;font-weight:700;list-style:none;display:grid;overflow:hidden}.chat-account summary::-webkit-details-marker{display:none}.chat-account summary img{object-fit:cover;block-size:100%;inline-size:100%}.chat-account-menu{z-index:5;gap:var(--space-3);min-inline-size:14rem;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm);color:var(--color-text-muted);font-size:var(--text-sm);overflow-wrap:anywhere;display:grid;position:absolute;inset-block-start:calc(100% + var(--space-2));inset-inline-end:0}.chat-transcript{overscroll-behavior:contain;padding:var(--space-4) max(var(--space-4), env(safe-area-inset-right)) var(--space-6) max(var(--space-4), env(safe-area-inset-left));overflow-y:auto}.chat-messages{gap:var(--space-3);max-inline-size:var(--chat-width);flex-direction:column;margin-inline:auto;padding:0;list-style:none;display:flex}.chat-message{gap:var(--space-2);flex-direction:column;max-inline-size:min(85%,36rem);display:flex}.chat-message-user{align-self:flex-end;align-items:flex-end}.chat-message-assistant{align-self:flex-start;align-items:flex-start}.chat-bubble{padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);white-space:pre-wrap;overflow-wrap:anywhere}.chat-message-user .chat-bubble{background:var(--color-accent);color:var(--color-on-accent);border-end-end-radius:var(--radius-sm)}.chat-message-assistant .chat-bubble{border:1px solid var(--color-border);background:var(--color-surface);border-end-start-radius:var(--radius-sm)}.chat-message-pending .chat-bubble{opacity:.7}.chat-pending-status,.chat-pending-error{color:var(--color-text-muted);font-size:.8125rem}.chat-pending-error{color:var(--color-danger)}.chat-pending-actions{justify-content:flex-end;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.chat-tool{gap:var(--space-1);padding:var(--space-2) var(--space-3);border:1px dashed var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-muted);font-size:var(--text-sm);display:grid}.chat-tool-name{align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-family:var(--font-mono);font-size:.8125rem;display:flex}.chat-tool-name svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linejoin:round;block-size:.95rem;inline-size:.95rem}.chat-tool-result{overflow-wrap:anywhere}.chat-tool-running .chat-tool-result{color:var(--color-text-muted)}.chat-tool-failed .chat-tool-result{color:var(--color-danger)}.chat-message-streaming .chat-bubble:after{content:"";vertical-align:text-bottom;background:currentColor;border-radius:1px;block-size:1em;inline-size:.5em;margin-inline-start:.15em;animation:1s ease-in-out infinite chat-pulse;display:inline-block}.chat-typing{padding-block:var(--space-3);gap:.3rem;display:flex}.chat-typing span{background:var(--color-text-muted);border-radius:50%;block-size:.45rem;inline-size:.45rem;animation:1.2s ease-in-out infinite chat-pulse}.chat-typing span:nth-child(2){animation-delay:.15s}.chat-typing span:nth-child(3){animation-delay:.3s}.chat-notice{justify-items:center;gap:var(--space-3);max-inline-size:24rem;color:var(--color-text-muted);text-align:center;margin:18vh auto 0;display:grid}.chat-notice code{border-radius:var(--radius-sm);background:var(--color-surface-muted);color:var(--color-text);padding:.1em .4em}.chat-notice-title{color:var(--color-text);font-size:var(--text-lg);font-weight:600}.chat-composer{align-items:flex-end;gap:var(--space-2);inline-size:100%;max-inline-size:calc(var(--chat-width) + 2 * var(--space-4));padding:var(--space-3) max(var(--space-4), env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + var(--space-3)) max(var(--space-4), env(safe-area-inset-left));margin-inline:auto;display:flex}.chat-composer textarea{field-sizing:content;min-block-size:2.75rem;max-block-size:40vh;padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);background:var(--color-surface);resize:none;font-size:max(var(--text-md), 16px);border-radius:1.375rem;flex:1;padding-block:.6rem;line-height:1.45}.chat-composer textarea:focus-visible{outline-offset:0;border-color:var(--color-accent)}.button.chat-send{flex:none;block-size:2.75rem;inline-size:2.75rem;padding:0}.button.chat-send svg{fill:none;stroke:currentColor;stroke-width:2.25px;stroke-linecap:round;stroke-linejoin:round;flex:none;block-size:1.25rem;inline-size:1.25rem}@keyframes chat-pulse{50%{opacity:.35}}
