/* Teca UI layer. Extracted from the runtime-injected `teca-ui-refinement` style so these rules apply to the FIRST paint instead of arriving after it - that gap was the unstyled flash. Loaded from , after the inline styles, which is the position the injected element used to occupy. */ :root{ --left-w:260px; --right-w:300px; --teca-edge:rgba(255,255,255,.07); --teca-accent:#2f81f7; } #history-panel{width:var(--left-w)!important;} #sidebar{width:var(--right-w)!important;} .teca-resizer{position:fixed;top:0;bottom:0;width:11px;z-index:150;cursor:col-resize; background:transparent;touch-action:none;} .teca-resizer::after{content:"";position:absolute;top:0;bottom:0;left:5px;width:1px; background:var(--teca-edge);transition:background .15s ease,width .15s ease,left .15s ease;} .teca-resizer:hover::after,.teca-resizer.dragging::after{background:var(--teca-accent); width:2px;left:4px;} .teca-resizer:focus-visible{outline:2px solid var(--teca-accent);outline-offset:-2px;} #teca-rz-left{left:calc(var(--left-w) - 5px);} #teca-rz-right{right:calc(var(--right-w) - 5px);} body.teca-dragging{user-select:none;cursor:col-resize;} main{transition:none!important;} .msg-row{max-width:min(100%, 54rem)!important;} .input-inner{max-width:min(100%, 54rem)!important;} #messages{padding-inline:0;line-height:1.68;} #messages > *{scroll-margin-top:1rem;} #messages p{margin:0 0 .85em;} #messages > *{scroll-margin-top:1rem;} #user-input{border-radius:14px!important;} #user-input:focus{outline:none;box-shadow:0 0 0 2px rgba(47,129,247,.35);} #history-panel .chat-item,#history-panel li,#history-panel a{border-radius:8px;} .projects-header,#history-panel .projects-header{text-transform:none!important; font-weight:500!important;letter-spacing:0!important;font-size:12px!important;} #history-panel div[style*="text-transform"]{text-transform:none!important; font-weight:500!important;letter-spacing:0!important;font-size:12px!important;} .hist-time{display:none!important;} .history-item{padding:6px 10px;font-size:13px;line-height:1.35;} .history-item .hist-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .history-item.active{background:var(--hover,rgba(127,127,127,.10))!important; color:var(--text)!important;border-color:transparent!important;font-weight:500;} .history-item:hover{background:var(--hover,rgba(127,127,127,.07));} .hist-actions{display:flex!important;opacity:0;transition:opacity .12s;pointer-events:none;} .history-item:hover .hist-actions,.history-item.shared .hist-actions{opacity:1;pointer-events:auto;} /* Out of flow: it fades in rather than appearing, so in-flow it reserved ~37px at the end of every row and truncated the titles early. It overlays the tail only when the row is hovered or active, which is exactly when the row has a background of its own. */ .hist-dots-btn{display:flex!important;opacity:0;transition:opacity .12s;pointer-events:none; position:absolute;right:6px;top:50%;transform:translateY(-50%);} .history-item:hover .hist-text,.history-item.active .hist-text{padding-right:24px;} .history-item:hover .hist-dots-btn,.history-item.active .hist-dots-btn{opacity:1;pointer-events:auto;} .history-item{align-items:center!important;gap:8px;} .history-item .hist-text{font-size:13.5px;color:var(--text);opacity:.85;} .history-item.active .hist-text{opacity:1;} .history-item::before{content:"";width:5px;height:5px;border-radius:50%; border:1px solid currentColor;opacity:.45;flex:none;align-self:center;} #status-center span,#status-text{display:none!important;} #status-center{gap:0!important;padding:0!important;min-width:0!important;} nav .nav-controls > a.btn-nav{display:none!important;} .nav-title,#nav-label{color:var(--text)!important;font-size:15px!important;font-weight:500!important; opacity:1!important;letter-spacing:0;} .nav-logo img{opacity:.85;} nav .btn-nav{font-weight:500;border-radius:8px;} .bot-content code,.bot-content pre,.bot-content kbd,.bot-content samp{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;} .bot-content table,.bot-content th,.bot-content td{font-family:inherit;font-size:14px;} .bot-content h1,.bot-content h2,.bot-content h3,.bot-content h4{font-family:inherit; font-weight:600;letter-spacing:-.01em;} .bot-content,.streaming-content{font-family:"Source Serif 4",Georgia,"Times New Roman",serif!important; font-variant-numeric:lining-nums tabular-nums;font-size:16.5px;line-height:1.72;} #status-center{display:none!important;} #new-chat-hero{display:none;} body.is-empty #new-chat-hero{display:flex;flex-direction:column;align-items:center; gap:14px;padding:0 24px 26px;} body.is-empty #chat-wrap{justify-content:center;} body.is-empty #messages{flex:0 0 auto;padding-bottom:0;} body.is-empty #input-area{border-top:none;background:transparent;} .nch-row{display:flex;align-items:center;gap:14px;} .nch-mark{width:44px;height:auto;display:block;border-radius:10px; animation:tw-pulse 2.4s ease-in-out infinite;} @media (prefers-reduced-motion: reduce){.nch-mark{animation:none;opacity:1;}} .nch-title{font-family:"Source Serif 4",Georgia,serif;font-size:34px;font-weight:400; letter-spacing:-.01em;margin:0;color:var(--text);} .nch-hint{margin:0;min-height:1.4em;font-size:14.5px;color:var(--muted); transition:opacity .3s ease;text-align:center;} .nch-hint.fading{opacity:0;} @media (max-width:900px){.nch-title{font-size:26px;}.nch-mark{font-size:24px;}} .input-row{flex-wrap:wrap!important;align-items:center;gap:6px; border:1px solid var(--border);border-radius:16px;background:var(--bg); padding:9px 12px;transition:box-shadow .15s,border-color .15s;} /* Roomy only on the new-chat screen, where the composer is the screen's subject. Once a conversation is running it stays compact, so it takes as little of the thread as it can. */ body.is-empty .input-row{padding:20px 16px 14px;} /* One row in a running chat: the field sits between the buttons instead of above them. */ body:not(.is-empty) .input-row{flex-wrap:nowrap!important;} body:not(.is-empty) .input-row > div[style*="flex:1"]{flex:1 1 auto!important; min-width:0!important;} .input-row:focus-within{border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);} .input-row > div[style*="flex:1"]{order:-1;flex:1 0 100%!important;min-width:100%!important;} #user-input{border:none!important;background:transparent!important;box-shadow:none!important; padding:2px 8px!important;font-size:15.5px;min-height:32px;} #user-input:focus{box-shadow:none!important;outline:none!important;} #attach-btn,#composer-more,#dictate-btn{background:transparent!important;border:none!important; width:30px;height:30px;border-radius:8px;color:var(--muted);} #attach-btn:hover,#composer-more:hover,#dictate-btn:hover{background:var(--hover,rgba(127,127,127,.10))!important; color:var(--text);} .composer-model:hover{background:var(--hover,rgba(127,127,127,.10));} nav .nav-logo img{content:url("/static/teca-mark.png");height:23px!important;width:auto; opacity:1;} .teca-brand-rule{display:none!important;} .teca-brand{margin-left:10px!important;} nav{background:transparent!important;border-bottom:none!important;padding-left:0!important;} .nav-logo{width:var(--left-w)!important;box-sizing:border-box;padding-left:16px; padding-right:16px;height:100%;margin-right:16px;background:var(--surface); border-right:1px solid var(--border);border-bottom:1px solid var(--border); justify-content:flex-start!important;} @media (max-width:900px){nav{padding-left:10px!important;} .nav-logo{width:auto!important;background:transparent;border-right:none;border-bottom:none;}} body:not(.panel-open){--right-w:0px;} body:not(.panel-open) #sidebar,body:not(.panel-open) #teca-rz-right{display:none!important;} body.panel-open #sidebar{background:transparent!important; border:1px solid var(--border)!important;border-right:none!important; border-radius:14px 0 0 14px;top:62px;bottom:12px;right:0;height:auto; box-shadow:none;overflow:hidden;} #sidebar-tabs{align-items:center;} body.panel-open #panel-toggle-btn{color:var(--accent);border-color:var(--accent);} @media (max-width:900px){body:not(.panel-open){--right-w:0px;} body:not(.panel-open) #sidebar{display:flex!important;}} #attach-btn,#composer-more,#dictate-btn{display:inline-flex!important;align-items:center; justify-content:center;padding:0!important;line-height:0;} #attach-btn .icon,#composer-more .icon,#dictate-btn .icon, #attach-btn svg,#composer-more svg,#dictate-btn svg{display:block;margin:0;} #input-area{background:transparent!important;border-top:none!important;} @media (min-width:901px){ body:not(.is-empty) #input-area{position:absolute;left:0;right:0;bottom:0;z-index:20; pointer-events:none;padding-bottom:16px;} body:not(.is-empty) #input-area .input-inner{pointer-events:auto;} body:not(.is-empty) #messages{padding-bottom:140px;} body:not(.is-empty) #input-area::before{content:"";position:absolute;left:0;right:0; bottom:0;height:calc(100% + 40px);pointer-events:none;z-index:-1; background:linear-gradient(to top,var(--bg) 58%,transparent);} } .input-row{background:var(--surface)!important; box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 28px rgba(0,0,0,.07);} #side-nav,#projects-section,#history-search-wrap,#search-results,#side-user-wrap, #panel-header{flex:none;} #history-list{flex:1 1 auto;min-height:0;} #projects-section,#history-search-wrap{display:none!important;} #history-panel div[style*="text-transform"]{display:none!important;} .screen-search{flex:1;max-width:320px;background:var(--surface);color:var(--text); border:1px solid var(--border);border-radius:9px;padding:8px 12px;font-size:13px; font-family:inherit;outline:none;} .screen-search:focus{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));} #side-nav{display:flex!important;flex-direction:column!important;gap:1px; padding:6px 6px 2px!important;height:auto!important;background:transparent!important; border:none!important;} .side-nav-item{display:flex;align-items:center;gap:10px;width:100%;background:none; border:none;cursor:pointer;padding:7px 9px;border-radius:8px;color:var(--text); font-size:13.5px;font-family:inherit;text-align:left;} .side-nav-item:hover{background:var(--hover,rgba(127,127,127,.08));} .side-nav-item.active{background:var(--hover,rgba(127,127,127,.13));font-weight:500;} .side-nav-item .icon{width:15px;height:15px;color:var(--muted);flex:none;} .side-nav-count{margin-left:auto;font-size:11px;color:var(--muted);} #history-panel{display:flex;flex-direction:column;} #side-user-wrap{position:relative;margin-top:auto;border-top:1px solid var(--border); padding:6px;flex:none;} #side-user{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none; cursor:pointer;padding:7px 8px;border-radius:9px;color:var(--text);font-size:13.5px; font-family:inherit;text-align:left;} #side-user:hover{background:var(--hover,rgba(127,127,127,.08));} .side-user-avatar{width:24px;height:24px;border-radius:50%;background:var(--accent); color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center; justify-content:center;flex:none;overflow:hidden;} .side-user-avatar img{width:100%;height:100%;object-fit:cover;display:block; border-radius:50%;} .side-user-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .side-user-chev{width:14px;height:14px;color:var(--muted);transition:transform .15s;} #side-user-wrap.open .side-user-chev{transform:rotate(180deg);} #side-user-menu{display:none;position:absolute;left:6px;right:6px;bottom:calc(100% - 2px); background:var(--surface);border:1px solid var(--border);border-radius:12px; box-shadow:0 10px 34px rgba(0,0,0,.18);padding:6px;z-index:400;} #side-user-wrap.open #side-user-menu{display:block;} .side-user-head{padding:8px 9px 9px;border-bottom:1px solid var(--border);margin-bottom:5px;} .side-user-fullname{font-size:13px;font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .side-user-email{font-size:11.5px;color:var(--muted);margin-top:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .side-user-item{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px; cursor:pointer;font-size:13px;color:var(--text);} .side-user-item:hover{background:var(--hover,rgba(127,127,127,.10));} .side-user-item.danger{color:var(--danger);} .side-user-item .icon{width:14px;height:14px;color:var(--muted);flex:none;} .side-user-sep{height:1px;background:var(--border);margin:5px 4px;} .side-user-value{margin-left:auto;font-size:12px;color:var(--muted);} .side-lang{display:none;padding:2px 0 4px 10px;} .side-lang.open{display:block;} .side-user-item.sub{font-size:12.5px;color:var(--muted);padding-left:22px;} .side-user-item.sub.chosen{color:var(--text);font-weight:500;} .side-user-item.sub.chosen::before{content:"\u2713";position:absolute;margin-left:-16px;} .side-user-item.sub{position:relative;} .app-screen{display:none;flex:1;overflow-y:auto;} .screen-inner{max-width:min(100%, 54rem);margin:0 auto;padding:34px 32px 60px;} .screen-head{display:flex;align-items:center;gap:16px;margin-bottom:26px;} .screen-title{font-family:"Source Serif 4",Georgia,serif;font-size:30px;font-weight:400; margin:0;color:var(--text);letter-spacing:-.01em;} .screen-action{margin-left:auto;background:var(--text);color:var(--bg);border:none; border-radius:9px;padding:8px 14px;font-size:13px;font-weight:500;cursor:pointer; font-family:inherit;} .screen-action:hover{opacity:.88;} .screen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;} .screen-card{border:1px solid var(--border);border-radius:12px;padding:16px 18px; cursor:pointer;transition:border-color .15s,background .15s;} .screen-card:hover{background:var(--hover,rgba(127,127,127,.05)); border-color:color-mix(in srgb,var(--accent) 40%,var(--border));} .screen-card-title{font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:5px;} .screen-card-sub{font-size:12.5px;color:var(--muted);overflow:hidden; text-overflow:ellipsis;white-space:nowrap;} .screen-list{display:flex;flex-direction:column;gap:2px;} .screen-row{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:9px; cursor:pointer;font-size:14px;color:var(--text);} .screen-row:hover{background:var(--hover,rgba(127,127,127,.08));} .screen-row-icon{flex:0 0 auto;color:var(--muted);} .screen-row + .screen-row{border-top:1px solid color-mix(in srgb,var(--border) 45%,transparent);border-radius:0;} .screen-more{display:block;width:100%;text-align:left;font:inherit;font-size:12.5px;color:var(--muted);padding:12px;margin-top:4px;background:none;border:0;cursor:pointer;border-radius:8px;} .screen-more:hover{background:var(--hover,rgba(127,127,127,.08));color:var(--text);} .screen-card-head{display:flex;align-items:center;gap:9px;margin-bottom:5px;} .screen-card-icon{flex:0 0 auto;color:var(--muted);} .screen-card-head .screen-card-title{margin-bottom:0;} .screen-row-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .screen-row-date{font-size:12px;color:var(--muted);flex:none;} .screen-empty{font-size:13.5px;color:var(--muted);} #archived-screen .archived-list{display:block!important;max-height:none!important; overflow:visible!important;} nav .nav-controls > div[style*="position:relative"]{display:none!important;} nav .nav-controls > button.btn-nav{display:none!important;} .panel-tab{text-transform:none!important;font-weight:500!important; letter-spacing:0!important;font-size:13px!important;color:var(--muted)!important;} .panel-tab.active{color:var(--text)!important; border-bottom-color:var(--text)!important;} @media (max-width: 900px){ main{margin-left:0!important;margin-right:0!important;} .teca-resizer{display:none!important;} #history-panel{transform:translateX(-100%);transition:transform .22s ease;width:min(84vw,320px)!important;z-index:70;} #sidebar{transform:translateX(100%);transition:transform .22s ease;width:min(88vw,340px)!important;z-index:70;} body.teca-left-open #history-panel{transform:none;box-shadow:0 0 40px rgba(0,0,0,.5);} body.teca-right-open #sidebar{transform:none;box-shadow:0 0 40px rgba(0,0,0,.5);} #messages{padding-inline:1rem;} #user-input{font-size:16px!important;} .teca-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:65;} } @media (min-width: 901px){ .teca-scrim{display:none;} } @media (prefers-reduced-motion: reduce){ *{transition:none!important;} } /* Brand lockup. These were injected by `teca-brand-style` at runtime, which meant the wordmark appeared unstyled for as long as the script took to run. */ nav .nav-logo{justify-content:flex-start!important;gap:0;} .teca-brand{display:inline-flex;align-items:center;gap:9px;margin-left:10px;min-width:0;} .teca-brand-rule{display:none;} .teca-brand-name{font-family:"Source Serif 4",Georgia,serif!important;font-size:20px!important;font-weight:500!important;font-style:normal!important;letter-spacing:0!important;color:#269fca!important;line-height:1!important;} @media (max-width: 560px){ .teca-brand{display:none;} } /* The greeting is a conclusion: it is not drawn until the app knows there is no conversation to restore. An empty message list is the normal state while one loads. */ body.booting:not(.boot-empty) #new-chat-hero{display:none!important;} /* A scrollbar that appears mid-stream takes its width out of the content, so the whole reading column jumps sideways as an answer arrives. Reserving the gutter keeps the width constant whether the bar is there or not. */ #messages,.app-screen,#history-list{scrollbar-gutter:stable;} /* One scrollbar treatment for every scroll area: a rounded translucent thumb on a transparent track, faint at rest and stronger while the pointer is in the area it scrolls. The 3px transparent border (painted via background-clip) keeps the grab target comfortable while the thumb still reads as thin. */ /* Firefox only. Chrome DROPS every ::-webkit-scrollbar rule below the moment scrollbar-color is set on the same element, and falls back to a wide classic bar WITH arrow buttons - so these two properties are fenced off from the browsers that have the pseudo-elements. */ @supports not selector(::-webkit-scrollbar){ #messages,.app-screen,#history-list,#sources-list,#sidebar,#archived-list{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--text) 16%,transparent) transparent;} #messages:hover,.app-screen:hover,#history-list:hover,#sources-list:hover,#sidebar:hover, #archived-list:hover{ scrollbar-color:color-mix(in srgb,var(--text) 30%,transparent) transparent;} } #messages::-webkit-scrollbar,.app-screen::-webkit-scrollbar,#history-list::-webkit-scrollbar, #sources-list::-webkit-scrollbar,#sidebar::-webkit-scrollbar,#archived-list::-webkit-scrollbar{ width:8px;height:8px;} #messages::-webkit-scrollbar-track,.app-screen::-webkit-scrollbar-track, #history-list::-webkit-scrollbar-track,#sources-list::-webkit-scrollbar-track, #sidebar::-webkit-scrollbar-track,#archived-list::-webkit-scrollbar-track{ background:transparent;} /* A 3px hairline at rest, 6px under the pointer. The width is the thumb's transparent border, because ::-webkit-scrollbar cannot resize per state; border-width animates, so it grows rather than jumps. */ #messages::-webkit-scrollbar-thumb,.app-screen::-webkit-scrollbar-thumb, #history-list::-webkit-scrollbar-thumb,#sources-list::-webkit-scrollbar-thumb, #sidebar::-webkit-scrollbar-thumb,#archived-list::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--text) 16%,transparent); border:2.5px solid transparent;background-clip:padding-box;border-radius:999px; transition:background .18s,border-width .18s;} #messages:hover::-webkit-scrollbar-thumb,.app-screen:hover::-webkit-scrollbar-thumb, #history-list:hover::-webkit-scrollbar-thumb,#sources-list:hover::-webkit-scrollbar-thumb, #sidebar:hover::-webkit-scrollbar-thumb,#archived-list:hover::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--text) 30%,transparent);background-clip:padding-box; border-width:1px;} #messages::-webkit-scrollbar-thumb:hover,.app-screen::-webkit-scrollbar-thumb:hover, #history-list::-webkit-scrollbar-thumb:hover,#sources-list::-webkit-scrollbar-thumb:hover, #sidebar::-webkit-scrollbar-thumb:hover,#archived-list::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--text) 40%,transparent);background-clip:padding-box; border-width:1px;} #messages::-webkit-scrollbar-thumb:active,.app-screen::-webkit-scrollbar-thumb:active, #history-list::-webkit-scrollbar-thumb:active,#sources-list::-webkit-scrollbar-thumb:active, #sidebar::-webkit-scrollbar-thumb:active,#archived-list::-webkit-scrollbar-thumb:active{ background:color-mix(in srgb,var(--text) 50%,transparent);background-clip:padding-box; border-width:1px;} #messages::-webkit-scrollbar-corner,.app-screen::-webkit-scrollbar-corner{background:transparent;} /* ── conversation tools sit over the conversation ── The centre of the reading area, not of the window: the sidebar occupies --left-w and the sources panel --right-w when open, so the controls stay put as either changes. */ /* The header controls stay at the right edge - centring them was a misreading of which block was meant, and the conversation column is centred by main's margins now. */ /* The greeting belongs to an empty CONVERSATION, never to a screen. */ body.screen-open #new-chat-hero{display:none!important;} body.screen-open #input-area{display:none!important;} /* ── main is the VISIBLE area ── The base stylesheet hardcodes margin-left:220px / margin-right:260px, from before the panels were resizable. The panels are fixed-position and sized from these variables, so main has to use the same ones - otherwise part of main hides under the sidebar, space is reserved for a closed panel, and everything centred inside main is centred in a box that is not what anyone sees. */ @media (min-width:901px){ main{ margin-left:var(--left-w)!important; margin-right:var(--right-w, 0px)!important; } }