/* ChunkArc assistant, 20261003.
 * Visual adaptations from OpenSource UI Chat Bubble Notification,
 * Depth Outline and Discord Chat. Copyright (c) 2026 Bidyut Kundu.
 * MIT notice accompanies this asset in LICENSE.opensourceui.txt.
 * Existing API, privacy, history and safe text rendering are preserved.
 */
.ca-chat-root { --chat-cyan:#62dbf6; --chat-text:#eef6fa; --chat-muted:#afc3cd; --chat-line:#334952; --chat-ease:cubic-bezier(.2,.8,.2,1); font-family:ArcBody,Arial,sans-serif; color:var(--chat-text); }
.ca-chat-root *, .ca-chat-root *::before, .ca-chat-root *::after { box-sizing:border-box; }
.ca-chat-root button, .ca-chat-root textarea { font:inherit; }
.ca-chat-root :is(button,a,summary):focus-visible { outline:2px solid var(--chat-cyan); outline-offset:3px; }
.ca-chat-root button { cursor:pointer; }
.ca-chat-root button:disabled { cursor:default; opacity:.5; }
.ca-chat-launcher { position:fixed; z-index:70; right:max(24px,env(safe-area-inset-right)); bottom:max(24px,env(safe-area-inset-bottom)); display:grid; place-items:center; width:56px; height:56px; padding:0; color:var(--chat-cyan); border:1px solid #3e7382; border-radius:20px; background:linear-gradient(145deg,#204653,#11272f); box-shadow:inset 0 1px 0 #ffffff24,0 8px 30px #0007; transition:transform .18s var(--chat-ease),background .18s,opacity .18s,visibility .18s; }
.ca-chat-launcher svg { width:25px; height:25px; }
.ca-chat-icon-close { display:none; }
.ca-chat-root.is-open .ca-chat-launcher { opacity:0; visibility:hidden; pointer-events:none; transform:scale(.88); }
.ca-chat-panel { position:fixed; z-index:71; right:max(24px,env(safe-area-inset-right)); bottom:max(24px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; width:min(440px,calc(100vw - 32px)); height:min(700px,calc(100vh - 48px)); height:min(700px,calc(100dvh - 48px)); border:1px solid #3b5661; border-radius:22px; overflow:hidden; background:#0d1a21; box-shadow:inset 0 1px 0 #ffffff14,0 24px 70px #0008; transform-origin:bottom right; transition:opacity .2s ease,transform .24s var(--chat-ease),visibility .24s; }
.ca-chat-panel[hidden] { display:flex!important; visibility:hidden; pointer-events:none; opacity:0; transform:translateY(16px) scale(.97); }
.ca-chat-head { display:flex; align-items:center; flex:none; gap:12px; padding:16px; border-bottom:1px solid #ffffff0d; background:radial-gradient(ellipse at top left,#24536665,transparent 85%),#132730; }
.ca-chat-mark { display:grid; place-items:center; flex:none; width:40px; height:40px; border:1px solid #5fadc038; border-radius:13px; background:#0c1e26; box-shadow:inset 0 1px 0 #ffffff12; }
.ca-chat-mark img { display:block; width:30px; height:30px; }
.ca-chat-titles { flex:1; min-width:0; }
.ca-chat-title { margin:0; font-family:ArcDisplay,ArcBody,Arial,sans-serif; font-size:16px; font-weight:700; line-height:1.3; letter-spacing:-.02em; color:var(--chat-text); }
.ca-chat-sub { margin:4px 0 0; font-size:12px; line-height:1.4; color:var(--chat-muted); }
.ca-chat-close,.ca-chat-reset { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--chat-muted); transition:background .15s,color .15s,box-shadow .15s; }
.ca-chat-close svg,.ca-chat-reset svg { width:19px; height:19px; }
.ca-chat-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:10px 16px; flex:none; border-bottom:1px solid #ffffff0d; }
.ca-chat-shortcut { display:flex; justify-content:center; align-items:center; min-height:44px; min-width:0; padding:6px; border:1px solid #31454e; border-radius:10px; color:#c1e6ef; background:#14252d; font-size:12px; line-height:1.3; text-align:center; text-decoration:none; transition:background .16s,border-color .16s; }
.ca-chat-log { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:20px 18px 8px; scrollbar-width:thin; scrollbar-color:#4a636e transparent; }
.ca-chat-welcome { animation:ca-chat-enter .22s var(--chat-ease) both; }
.ca-chat-eyebrow,.ca-chat-topic-label { margin:0; font-size:10px; font-weight:700; line-height:1.5; letter-spacing:.09em; text-transform:uppercase; color:var(--chat-cyan); }
.ca-chat-welcome-title { margin:8px 0 0; font-family:ArcDisplay,ArcBody,Arial,sans-serif; font-size:25px; font-weight:700; line-height:1.2; letter-spacing:-.04em; color:var(--chat-text); }
.ca-chat-welcome-body { margin:10px 0 20px; font-size:14px; line-height:1.6; color:var(--chat-muted); }
.ca-chat-topic-label { margin-bottom:10px; color:var(--chat-muted); }
.ca-chat-suggest { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding-bottom:8px; }
.ca-chat-topic { min-width:0; animation:ca-chat-enter .22s var(--chat-ease) both; }
.ca-chat-topic:nth-child(2) { animation-delay:35ms; }
.ca-chat-topic:nth-child(3) { animation-delay:70ms; }
.ca-chat-topic:nth-child(4) { animation-delay:105ms; }
.ca-chat-chip { position:relative; display:flex; flex-direction:column; align-items:flex-start; width:100%; min-height:104px; gap:7px; padding:13px; border:1px solid #344d58; border-radius:14px; background:linear-gradient(155deg,#19303a,#13242c); color:var(--chat-text); text-align:left; box-shadow:inset 0 1px 0 #ffffff0b,0 3px 8px #0002; transition:transform .16s var(--chat-ease),border-color .16s,background .16s,box-shadow .16s; }
.ca-chat-topic-icon { width:20px; height:20px; color:var(--chat-cyan); }
.ca-chat-topic-arrow { position:absolute; right:12px; top:14px; width:16px; height:16px; color:#8badb9; transition:transform .16s; }
.ca-chat-chip-label { font-size:13px; font-weight:700; line-height:1.35; }
.ca-chat-chip-detail { color:var(--chat-muted); font-size:12px; line-height:1.4; }
.ca-chat-msg { max-width:100%; margin:0 0 18px; animation:ca-chat-enter .22s var(--chat-ease) both; overflow-wrap:anywhere; }
.ca-chat-author { display:block; margin:0 2px 6px; color:var(--chat-muted); font-size:11px; line-height:1.4; font-weight:600; }
.ca-chat-message-body { padding:14px; border:1px solid #304650; border-radius:4px 16px 16px 16px; background:#142730; color:#e1eef4; font-size:14px; line-height:1.65; }
.ca-chat-msg.is-user { max-width:88%; margin-left:auto; }
.ca-chat-msg.is-user .ca-chat-author { text-align:right; }
.ca-chat-msg.is-user .ca-chat-message-body { border-color:#366070; background:#1a414e; border-radius:16px 4px 16px 16px; color:#f0faff; }
.ca-chat-msg.is-error .ca-chat-message-body { background:#332b25; border-color:#6e5540; }
.ca-chat-message-body p { margin:0 0 10px; }
.ca-chat-message-body :is(ul,ol) { padding-left:22px; margin:0 0 10px; }
.ca-chat-message-body li { margin-bottom:6px; }
.ca-chat-message-body > :last-child { margin-bottom:0; }
.ca-chat-message-body code { padding:2px 4px; border-radius:4px; background:#08141b; font: .88em ui-monospace,Consolas,monospace; color:#c3f2ff; overflow-wrap:anywhere; }
.ca-chat-message-body a { color:var(--chat-cyan); text-decoration:underline; text-underline-offset:3px; }
.ca-chat-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.ca-chat-action { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 12px; border:1px solid #45626e; border-radius:10px; background:#152c36; color:#d3eef7; text-decoration:none; font-size:13px; line-height:1.4; }
.ca-chat-typing { display:flex; align-items:center; gap:10px; margin-bottom:18px; min-height:44px; color:var(--chat-muted); }
.ca-chat-dots { display:inline-flex; align-items:center; gap:4px; padding:12px 10px; border:1px solid #304650; border-radius:4px 12px 12px 12px; background:#142730; }
.ca-chat-dots span { width:5px; height:5px; border-radius:50%; background:var(--chat-cyan); animation:ca-chat-dot 1.1s ease-in-out 4; }
.ca-chat-dots span:nth-child(2) { animation-delay:.12s; }
.ca-chat-dots span:nth-child(3) { animation-delay:.24s; }
.ca-chat-thinking-label { font-size:12px; }
.ca-chat-toolbar { display:flex; flex:none; justify-content:space-between; align-items:center; gap:12px; padding:8px 18px 0; border-top:1px solid #ffffff0d; }
.ca-chat-composer-label { color:var(--chat-muted); font-size:12px; }
.ca-chat-counter { color:var(--chat-muted); font-size:11px; font-variant-numeric:tabular-nums; }
.ca-chat-form { display:flex; flex:none; align-items:flex-end; gap:8px; padding:8px 16px; }
.ca-chat-grow { display:grid; flex:1; min-width:0; max-height:110px; overflow-y:auto; border-radius:12px; }
.ca-chat-grow::after { content:attr(data-value) " "; visibility:hidden; white-space:pre-wrap; overflow-wrap:anywhere; }
.ca-chat-grow::after,.ca-chat-grow>.ca-chat-input { grid-area:1/1; min-height:48px; padding:12px; border:1px solid #405b67; font:16px/1.45 ArcBody,Arial,sans-serif; }
.ca-chat-input { width:100%; overflow:hidden; resize:none; color:var(--chat-text); background:#08151c; border-radius:12px; transition:border-color .16s,box-shadow .16s; }
.ca-chat-input::placeholder { color:#aac0cd; }
.ca-chat-input:focus { outline:none; border-color:var(--chat-cyan); box-shadow:inset 0 0 0 1px var(--chat-cyan); }
.ca-chat-send { display:grid; place-items:center; flex:none; width:48px; height:48px; padding:0; border:1px solid #8fe9f9; border-radius:13px; background:linear-gradient(145deg,#84e9fa,#46c8e6); color:#09212b; box-shadow:inset 0 1px 0 #ffffff66,0 3px 8px #0003; transition:transform .16s,box-shadow .16s; }
.ca-chat-send svg { width:22px; height:22px; }
.ca-chat-root .ca-chat-privacy { display:block; flex:none; margin:0; padding:0 16px max(8px,env(safe-area-inset-bottom)); border:0; border-radius:0; background:none; color:var(--chat-muted); font:inherit; box-shadow:none; }
.ca-chat-root .ca-chat-privacy-summary { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0 8px; min-height:44px; margin:0; padding:6px 2px; border:0; border-radius:0; box-shadow:none; background:none; list-style:none; cursor:pointer; font-size:11px; line-height:1.45; }
.ca-chat-privacy-summary::-webkit-details-marker { display:none; }
.ca-chat-privacy-summary::marker { content:""; }
.ca-chat-privacy-label { display:inline-flex; align-items:center; gap:6px; color:#c1e6ef; text-decoration:underline; text-underline-offset:3px; }
.ca-chat-privacy-label::after { content:""; width:5px; height:5px; border-right:1px solid; border-bottom:1px solid; transform:rotate(45deg); transition:transform .16s; }
.ca-chat-privacy[open] .ca-chat-privacy-label::after { transform:rotate(225deg); }
.ca-chat-privacy-body { max-height:min(200px,30dvh); overflow-y:auto; overscroll-behavior:contain; padding:8px 2px; border-top:1px solid #344d58; scrollbar-width:thin; }
.ca-chat-privacy-body :is(.ca-chat-safety,.ca-chat-note) { margin:0; padding:0; text-align:left; color:var(--chat-muted); font-size:12px; line-height:1.55; }
.ca-chat-privacy-body .ca-chat-note { margin-top:8px; }
.ca-chat-note a { color:var(--chat-cyan); text-decoration:underline; text-underline-offset:3px; }
.ca-chat-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes ca-chat-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes ca-chat-dot { 0%,65%,100% { transform:none; opacity:.55; } 30% { transform:translateY(-3px); opacity:1; } }
@media (hover:hover) { .ca-chat-launcher:hover { transform:translateY(-2px); background:#204653; } .ca-chat-chip:hover { transform:translateY(-2px); border-color:#65a2b5; box-shadow:inset 0 1px 0 #ffffff12,0 6px 14px #0003; } .ca-chat-chip:hover .ca-chat-topic-arrow { transform:translateX(2px); } .ca-chat-shortcut:hover,.ca-chat-action:hover { background:#23414e; border-color:#719aaa; } .ca-chat-close:hover,.ca-chat-reset:hover { background:#ffffff0c; color:#fff; } .ca-chat-send:hover:not(:disabled) { transform:translateY(-1px); box-shadow:inset 0 1px 0 #ffffff80,0 6px 12px #0004; } }
.ca-chat-root button:active:not(:disabled) { transform:translateY(1px); box-shadow:inset 0 2px 4px #0003; }
@media (max-width:560px) { .ca-chat-launcher { right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); } .ca-chat-panel { left:max(8px,env(safe-area-inset-left)); right:max(8px,env(safe-area-inset-right)); bottom:max(8px,env(safe-area-inset-bottom)); width:auto; height:calc(100vh - 24px); height:calc(100dvh - 24px - env(safe-area-inset-bottom)); max-height:760px; border-radius:20px; transform-origin:bottom center; } .ca-chat-head { padding:12px; gap:8px; } .ca-chat-title { font-size:15px; } .ca-chat-sub { font-size:11px; } .ca-chat-mark { width:34px; height:34px; } .ca-chat-mark img { width:27px; height:27px; } .ca-chat-shortcuts { padding:8px 12px; } .ca-chat-log { padding:18px 14px 8px; } .ca-chat-welcome-title { font-size:24px; } .ca-chat-form { padding-inline:12px; } .ca-chat-toolbar { padding-inline:14px; } .ca-chat-root .ca-chat-privacy { padding-inline:12px; } }
@media (max-width:359px) { .ca-chat-suggest { grid-template-columns:1fr; } .ca-chat-chip { min-height:92px; padding-left:43px; } .ca-chat-topic-icon { position:absolute; left:12px; top:15px; } .ca-chat-topic-arrow { top:auto; bottom:14px; } .ca-chat-head { gap:4px; } .ca-chat-mark { display:none; } }
@media (max-height:440px) { .ca-chat-panel { height:calc(100dvh - 16px); bottom:8px; } .ca-chat-head { padding-block:5px; } .ca-chat-shortcuts { padding-block:4px; } .ca-chat-toolbar { padding-top:4px; } .ca-chat-form { padding-block:4px; } .ca-chat-root .ca-chat-privacy { padding-bottom:0; } }
@media (prefers-reduced-motion:reduce) { .ca-chat-root *, .ca-chat-root *::before,.ca-chat-root *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } .ca-chat-panel[hidden] { transform:none; } }
/* Visibility must become usable immediately for focus entry/return. */
.ca-chat-launcher { transition:transform .18s var(--chat-ease),background .18s,opacity .18s; }
.ca-chat-panel { transition:opacity .2s ease,transform .24s var(--chat-ease); }
@media (forced-colors:active) { .ca-chat-panel,.ca-chat-message-body,.ca-chat-chip,.ca-chat-shortcut,.ca-chat-input { border-color:CanvasText; } .ca-chat-root :is(button,a,summary):focus-visible { outline-color:Highlight; } }
