:root{color-scheme:light;--bg:#fff;--text:#0d0d0d;--muted:#5b5b68;--line:#e5e5e5;--surface:#f4f4f4;--sidebar:#f9f9f9;--accent:#0d0d0d;--accent-text:#fff;--logo-color:currentColor}
:root[data-theme="dark"]{color-scheme:dark;--bg:#212121;--text:#ececec;--muted:#b8b8b8;--line:#383838;--surface:#2f2f2f;--sidebar:#171717;--accent:#ececec;--accent-text:#171717}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
html,body{margin:0;min-height:100%;height:100%;background:var(--bg);color:var(--text);font:16px/1.6 Inter,-apple-system,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--muted);outline-offset:2px}
.shell{display:flex;min-height:100vh;height:100dvh;background:var(--bg)}
.sidebar{width:260px;flex:none;background:var(--sidebar);display:flex;flex-direction:column;padding:10px;gap:2px;border-right:1px solid var(--line);overflow:hidden;transition:margin-left .2s}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 12px;font-weight:600;font-size:18px;flex:none;letter-spacing:-.03em}.brand-logo{width:20px;height:25px;flex:none}
.new-chat{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:transparent;border-radius:10px;text-align:left;font-size:14px;color:var(--text)}.new-chat:hover,.nav-item:hover,.history-item:hover{background:var(--surface)}
.main-nav{display:grid;gap:2px;margin:2px 0}.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:transparent;border-radius:10px;text-align:left;font-size:14px;color:var(--text)}.nav-item.active{background:var(--surface)}.nav-item svg{width:17px;height:17px}
.history{flex:1;min-height:0;overflow:auto;margin-top:5px}.history-heading{display:flex;align-items:center;justify-content:space-between;margin:14px 10px 4px;color:var(--muted);font-size:12px;font-weight:600}.history-heading button{border:0;background:transparent;border-radius:7px;padding:4px;color:var(--muted)}.history-heading button:hover{background:var(--surface);color:var(--text)}.history-heading svg{width:15px;height:15px}
.search-box{display:flex;align-items:center;gap:8px;margin:6px 0;padding:8px 12px;font-size:14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--muted)}.search-box svg{width:15px;height:15px}.search-box input{width:100%;min-width:0;padding:0;border:0;outline:0;background:transparent;color:var(--text);font-size:14px}.search-box input::placeholder{color:var(--muted)}
.history-list{display:grid;gap:2px}.history-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:transparent;text-align:left;font-size:13px;color:var(--text)}.history-item svg{width:16px;height:16px;color:var(--muted)}.history-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-item small{color:var(--muted);font-size:11px}.history-item[hidden]{display:none!important}
.sidebar-bottom{display:grid;gap:2px;padding-top:8px;border-top:1px solid var(--line)}.minor-link{padding:7px 10px;border-radius:9px;color:var(--muted);font-size:13px}.minor-link:hover{background:var(--surface);color:var(--text)}.profile{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;margin-top:3px;border:0;border-radius:10px;background:transparent;text-align:left;font-size:13px}.profile:hover{background:var(--surface)}.profile>svg:first-child{width:20px;height:20px}.profile span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-arrow{width:15px;height:15px;color:var(--muted)}
.main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;gap:8px;flex:none}.mobile-brand{display:none;font-size:18px;font-weight:600}.top-actions{display:flex;gap:8px;align-items:center;margin-left:auto}.credit-pill{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;padding:5px 7px}.credit-pill svg{width:16px;height:16px}.credit-pill strong{font-weight:500;color:var(--text)}.icon-button{display:grid;place-items:center;width:34px;height:34px;padding:5px;border:0;border-radius:8px;background:transparent;color:var(--text)}.icon-button:hover{background:var(--surface)}.icon-button svg{width:19px;height:19px}
.welcome{max-width:768px;width:calc(100% - 32px);margin:auto;padding:24px 0 0;text-align:center}.hero-logo{width:34px;height:42px;margin-bottom:14px;color:var(--text)}.welcome h1{font-size:30px;font-weight:600;line-height:1.3;margin:0;letter-spacing:-.025em}.welcome-copy{font-size:14px;color:var(--muted);margin:10px 0 22px;line-height:1.7}
.suggestions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.suggestions button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:transparent;color:var(--text);font-size:13px;transition:background .15s,border-color .15s}.suggestions button:hover{background:var(--surface);border-color:var(--muted)}.suggestions button svg{width:16px;height:16px;color:var(--muted)}.suggestions button span{white-space:nowrap}
.conversation{flex:1;min-height:0;overflow:auto;padding:8px 16px 24px;display:flex;flex-direction:column;gap:18px;margin:0 auto;width:100%;max-width:820px}.message{max-width:100%;padding:10px 16px;border:0;border-radius:20px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.75}.message.user{align-self:flex-end;max-width:80%;background:var(--surface);padding:10px 18px}.message.assistant{align-self:stretch;background:transparent}.message .role{margin-bottom:5px;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.08em}.message.error{color:#c33}
.composer{flex:none;padding:8px 16px 14px;margin-bottom:18px}.composer-input{max-width:768px;margin:0 auto;width:100%;display:flex;gap:8px;align-items:flex-end;background:var(--surface);border:1px solid transparent;border-radius:28px;padding:8px 10px 8px 20px;transition:border-color .15s}.composer-input:focus-within{border-color:var(--line)}.composer textarea{display:block;flex:1;min-width:0;width:100%;resize:none;max-height:180px;min-height:44px;padding:8px 0;border:0;outline:0;background:transparent;color:var(--text);line-height:1.55}.composer textarea::placeholder{color:var(--muted)}.composer-tools{display:flex;align-items:center;gap:5px;padding-bottom:2px}.attach-button{width:32px;height:32px;color:var(--muted)}.send-button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--accent);color:var(--accent-text);font-size:18px}.send-button:hover{opacity:.85}.send-button svg{width:19px;height:19px}.composer-footer{max-width:768px;width:100%;margin:8px auto 0;display:flex;justify-content:space-between;align-items:center;gap:10px}.model-badge{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.pulse{width:6px;height:6px;border-radius:50%;background:#16a34a}.model-auto{color:var(--muted)}.composer-hint{font-size:11px;color:var(--muted);text-align:right}.fineprint{max-width:768px;width:calc(100% - 32px);margin:0 auto 8px;text-align:center;color:var(--muted);font-size:10px}
.page,.settings{width:100%;max-width:800px;margin:38px auto;padding:24px;line-height:1.8}.page h1,.settings h1{font-size:32px;line-height:1.2;letter-spacing:-.035em;margin:0 0 16px}.page h2,.settings h2{font-size:19px;margin-top:28px}.page p,.page li,.note{color:var(--muted)}.page a{text-decoration:underline;text-underline-offset:3px}.setting-row{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding:18px 0;align-items:center}.setting-row p{color:var(--muted);margin:5px 0 0;font-size:13px}.setting-row input{width:120px;padding:10px;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:10px}.save{background:var(--accent);color:var(--accent-text);border:1px solid var(--accent);border-radius:999px;padding:9px 16px}.note{font-size:13px;line-height:1.7}
[hidden]{display:none!important}
@media(max-width:760px){.shell{height:100dvh}.sidebar{position:fixed;inset:0 auto 0 0;z-index:10;transform:translateX(-100%);transition:transform .2s;margin-left:0!important;width:min(290px,85vw);box-shadow:0 0 40px rgba(0,0,0,.25)}.sidebar.open{transform:translateX(0)}.main{width:100%}.topbar{padding:8px 12px}.mobile-brand{display:block}.welcome{padding:18px 0 0}.welcome h1{font-size:25px}.welcome-copy{font-size:13px}.suggestions{gap:7px}.suggestions button{padding:7px 11px;font-size:12px}.suggestions button svg{width:14px;height:14px}.composer{padding:8px 10px 12px}.composer-input{padding-left:15px}.composer-hint{font-size:10px}.credit-pill{font-size:11px}.fineprint{font-size:9px}.page,.settings{padding:18px;margin:12px auto}.setting-row{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Compact menus and account panel */
.codz-menu{position:fixed;z-index:40;right:16px;top:56px;min-width:230px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--bg);box-shadow:0 12px 36px #0002;display:grid;gap:2px}
.codz-menu[hidden],.account-popover[hidden]{display:none}
.codz-menu button,.codz-menu a,.account-popover button,.account-popover a{display:block;width:100%;padding:9px 11px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.codz-menu button:hover,.codz-menu a:hover,.account-popover button:hover,.account-popover a:hover{background:var(--surface)}
.account-popover{position:fixed;z-index:45;left:12px;bottom:76px;width:min(300px,calc(100vw - 24px));padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 14px 44px #0002}
.account-popover p{font-size:13px;color:var(--muted);margin:8px 0}.account-popover strong{display:block;overflow-wrap:anywhere;padding-right:24px}.account-popover .popover-close{position:absolute;right:8px;top:8px;width:auto;font-size:20px}
#redeem-open{border:0}.credit-pill{white-space:nowrap}

.provider-group{padding:12px 0;border-bottom:1px solid var(--line)}.provider-group h4{margin:4px 0 10px;font-size:14px}.provider-group .key-row{padding:9px 0}

.message-actions{display:flex;gap:5px;align-items:center;margin-top:8px;opacity:.72;transition:opacity .15s}.message:hover .message-actions,.message:focus-within .message-actions{opacity:1}
.message-action,.history-icon{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.message-action:hover,.history-icon:hover{border-color:var(--line);background:var(--surface);color:var(--text)}
.message-action svg,.history-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.message-more{display:flex;gap:4px;flex-wrap:wrap;padding:6px;margin-top:4px;border:1px solid var(--line);border-radius:10px;background:var(--panel);width:max-content;max-width:100%}.message-more button{border:0;border-radius:6px;background:transparent;color:var(--text);padding:7px 9px;font:inherit;font-size:12px;cursor:pointer}.message-more button:hover{background:var(--surface)}
.history-item{display:flex;align-items:center;gap:2px}.history-item .history-open{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;border:0;background:transparent;color:var(--muted);padding:8px;border-radius:7px;cursor:pointer;font:inherit;font-size:13px}.history-item .history-open:hover,.history-item.active .history-open{background:var(--surface);color:var(--text)}.history-icon{width:26px;height:26px;opacity:.7}.history-item:hover .history-icon{opacity:1}
.codz-toast{position:fixed;z-index:100;left:50%;bottom:90px;transform:translateX(-50%);max-width:min(520px,calc(100vw - 28px));padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);box-shadow:0 12px 40px #0003;font-size:13px}.codz-toast[hidden]{display:none}.thinking-gif{display:block;max-width:56px;max-height:40px;object-fit:contain;margin:4px 0 8px}.message-content{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:760px){.message-actions{opacity:1}.message-action{width:34px;height:34px}}

.history-item.pinned .history-open{font-weight:600;color:var(--text)}

/* UI repair pass: consistent controls, accessible focus and motion-safe feedback */
:where(button,a,input,textarea,select,[role="button"]){-webkit-tap-highlight-color:transparent}
:where(button,a,input,textarea,select,[role="button"]):focus-visible{outline:2px solid var(--accent,#6875f5);outline-offset:3px}
button:disabled{opacity:.55;cursor:not-allowed;transform:none!important}
.icon-button,.message-action,.history-icon{transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.icon-button:active,.message-action:active,.history-icon:active{transform:scale(.96)}
.codz-menu a{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:9px;color:var(--text);text-decoration:none;font:inherit;font-size:13px}
.codz-menu a:hover{background:var(--surface)}
.discord-link img{width:18px;height:18px;flex:0 0 18px;object-fit:contain}
.discord-link{font-weight:600!important}
.redeem-actions button{cursor:pointer}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Codz 2026 UI polish — monochrome iconography, clear focus, consistent controls */
.fi{display:inline-flex;align-items:center;justify-content:center;line-height:1;color:currentColor}
.discord-link{display:inline-flex;align-items:center;gap:9px}
.discord-link .fi{font-size:18px}
:where(button,a,input,textarea,select,[role="button"]):focus-visible{outline:2px solid var(--text);outline-offset:3px}
:where(button,a){transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .18s ease,border-color .18s ease,opacity .18s ease}
button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Flaticon UIcons: consistent sizing for every interface icon. */
.fi.ui-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:16px;line-height:1;flex:0 0 auto;vertical-align:middle}
.new-chat .ui-icon{width:18px;height:18px;font-size:17px}.nav-item .ui-icon{width:17px;height:17px;font-size:15px}.history-heading .ui-icon,.search-box .ui-icon{width:15px;height:15px;font-size:14px}.profile>.ui-icon:first-child{width:20px;height:20px;font-size:18px}.profile-arrow.ui-icon{width:15px;height:15px;font-size:13px;color:var(--muted)}.credit-pill .ui-icon{width:16px;height:16px;font-size:14px}.suggestions button .ui-icon{width:16px;height:16px;font-size:14px;color:var(--muted)}.icon-button .ui-icon,.message-action .ui-icon{width:18px;height:18px;font-size:16px}.message-action .ui-icon{width:15px;height:15px;font-size:14px}
@media(max-width:760px){.icon-button .ui-icon{width:18px;height:18px;font-size:16px}}

/* Codz interaction polish: stable empty chat, account row and quota popover. */
.main{position:relative}
.main.empty-state .welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto;padding:24px 0 0}
.main.empty-state .conversation:empty{flex:0 0 0;min-height:0;padding:0;margin:0 auto;overflow:hidden}
.main.empty-state .welcome h1,.main.empty-state .welcome-copy,.main.empty-state .suggestions{flex-shrink:0}
.credit-pill{border:1px solid transparent;border-radius:10px;background:transparent;cursor:pointer;font:inherit;transition:background .16s,border-color .16s}
.credit-pill:hover,.credit-pill[aria-expanded="true"]{background:var(--surface);border-color:var(--line)}
.profile-row{display:flex;align-items:center;gap:7px;min-width:0}
.profile-row .profile{flex:1;min-width:0;margin:0;padding:8px 7px;gap:8px}
.profile-row #profile-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.profile-avatar-wrap{width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;border:1px solid var(--line);border-radius:50%;overflow:hidden;background:var(--surface)}
.profile-avatar-wrap .ui-icon{font-size:17px;width:18px;height:18px}
.profile-avatar-wrap img{display:block;width:100%;height:100%;object-fit:cover}
.profile-avatar-wrap img[hidden],.profile-avatar-wrap i[hidden]{display:none}
.upgrade-plan{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;padding:8px 9px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:11px;font-weight:650;white-space:nowrap}
.upgrade-plan:hover{border-color:var(--text);transform:translateY(-1px)}
.upgrade-plan .ui-icon{width:14px;height:14px;font-size:13px}
.account-popover,.credits-popover{position:absolute;z-index:40;right:14px;top:58px;width:min(320px,calc(100vw - 28px));padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--bg);box-shadow:0 18px 60px #0002}
.account-popover[hidden],.credits-popover[hidden]{display:none}
.account-popover strong,.credits-popover strong{display:block;font-size:15px;margin:0 30px 12px 0}
.account-popover p,.credits-popover p{font-size:13px;color:var(--muted);margin:8px 0;line-height:1.5}
.credits-popover a,.account-popover a{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.quota-track{height:6px;overflow:hidden;border-radius:99px;background:var(--surface);margin:14px 0}
.quota-track span{display:block;height:100%;width:0;background:var(--text);border-radius:inherit;transition:width .25s ease}
.profile-row .profile-arrow{margin-left:auto}
.message.thinking .message-content{color:var(--muted)}
.message.thinking .message-content::after{content:"";display:inline-block;width:5px;height:5px;margin-left:5px;border-radius:50%;background:currentColor;vertical-align:middle;animation:codz-thinking 1s infinite alternate}
@keyframes codz-thinking{from{opacity:.25;transform:translateY(1px)}to{opacity:1;transform:translateY(-1px)}}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--text);outline-offset:3px}
@media(max-width:760px){.main.empty-state .welcome{padding:18px 0 0}.profile-row{gap:5px}.upgrade-plan{padding:8px 7px;font-size:10px}.account-popover,.credits-popover{top:54px;right:10px}}
@media(prefers-reduced-motion:reduce){.message.thinking .message-content::after{animation:none}}

/* User preferences managed from Settings. */
html[data-compact="true"] .conversation{gap:8px;padding-top:4px;padding-bottom:12px}
html[data-compact="true"] .message{padding-top:5px;padding-bottom:5px}


html[data-reduced-motion="true"] *,html[data-reduced-motion="true"] *::before,html[data-reduced-motion="true"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.profile-edit-row{display:flex;align-items:center;gap:16px;margin:14px 0 20px}
.profile-edit-avatar{width:72px;height:72px;flex:0 0 72px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:50%;background:var(--surface)}
.profile-edit-avatar .fi{font-size:26px;color:var(--muted)}
.profile-edit-avatar img{width:100%;height:100%;object-fit:cover}
.profile-edit-avatar img[hidden],.profile-edit-avatar i[hidden]{display:none}
.upload-profile-label{cursor:pointer}
.upload-profile-label input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.settings select{max-width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:9px;padding:10px}
.settings input[type="checkbox"]{width:18px;height:18px;accent-color:var(--text)}


/* Keep the empty-state composer close to the welcome content instead of pinning it to the bottom. */
.main.empty-state .welcome{flex:0 0 auto;justify-content:flex-end;padding:clamp(24px,8vh,88px) 0 18px}
.main.empty-state .composer{flex:0 0 auto}
.main.empty-state .fineprint{flex:0 0 auto;margin-bottom:14px}
@media(max-height:700px){.main.empty-state .welcome{padding-top:16px}.main.empty-state .welcome .hero-logo{max-height:90px}.main.empty-state .welcome h1{margin-top:8px}}


/* Composer fix: keep the input visible without page scrolling, including mobile keyboards. */
html,body{height:100%;overflow:hidden}
.shell{height:100vh;height:100dvh;min-height:0;overflow:hidden}
.main{min-height:0;overflow:hidden}
.composer{margin-bottom:0;padding-bottom:10px}
.main.empty-state .welcome{flex:1 1 auto;min-height:0;justify-content:center;padding:clamp(8px,3vh,28px) 0 12px}
.main.empty-state .fineprint{margin-bottom:4px}
@media(max-width:760px){
  .shell{height:100dvh;height:100svh;min-height:0}
  .main{height:100%;min-height:0}
  .topbar{flex:0 0 auto}
  .main.empty-state .welcome{padding:8px 0 10px;gap:8px}
  .main.empty-state .welcome h1{font-size:clamp(21px,6vw,25px);margin:6px 0}
  .main.empty-state .welcome .hero-logo{max-height:64px;width:auto}
  .main.empty-state .welcome-copy{margin:4px 0;font-size:12px}
  .main.empty-state .suggestions{max-height:20vh;overflow:auto;justify-content:center}
  .composer{flex:0 0 auto;padding:6px 10px calc(8px + env(safe-area-inset-bottom))}
  .composer textarea{min-height:38px;max-height:120px}
  .composer-input{gap:6px;padding:5px 7px 5px 13px;border-radius:24px}
  .composer-tools{gap:3px}
  .send-button{width:34px;height:34px;flex:0 0 34px}
  .composer-footer{margin-top:5px}
  .main.empty-state .fineprint{margin-bottom:2px}
}
@media(max-height:650px){
  .main.empty-state .welcome{padding-top:4px;padding-bottom:4px;gap:4px}
  .main.empty-state .welcome .hero-logo{max-height:44px}
  .main.empty-state .welcome-copy{display:none}
  .main.empty-state .suggestions{max-height:14vh}
  .composer-footer{margin-top:3px}
}


/* Raise the whole composer block visibly above the bottom edge. */
.composer{position:relative;transform:translateY(-28px);padding-top:4px;padding-bottom:4px}
.composer-footer{margin-top:4px}
@media(max-width:760px){
  .composer{transform:translateY(-44px);padding-top:3px;padding-bottom:3px}
  .composer-footer{margin-top:3px}
}
@media(max-height:650px){
  .composer{transform:translateY(-20px)}
  .composer-footer{display:none}
}


/* Final layout fix: pin the rounded chat composer to the visible viewport without a surrounding frame. */
#chat-form.composer{
  position:fixed!important;
  z-index:30;
  left:260px;
  right:0;
  bottom:0;
  transform:none!important;
  margin:0!important;
  padding:12px 16px max(12px,env(safe-area-inset-bottom))!important;
  background:linear-gradient(to bottom,transparent,var(--bg) 18%);
  box-sizing:border-box;
}
#chat-form .composer-input,#chat-form .composer-footer{max-width:768px;width:100%;margin-left:auto;margin-right:auto}
#chat-form .composer-footer{margin-top:5px}
#conversation.conversation{padding-bottom:170px!important}
body>.fineprint,.fineprint{margin-bottom:8px}
@media(max-width:760px){
  #chat-form.composer{
    left:0;right:0;bottom:0;
    padding:8px 10px max(10px,env(safe-area-inset-bottom))!important;
    background:linear-gradient(to bottom,transparent,var(--bg) 14%);
  }
  #chat-form .composer-input{max-width:none}
  #chat-form .composer-footer{margin-top:3px}
  #chat-form .composer-hint{display:none}
  #conversation.conversation{padding-bottom:135px!important}
}


/* Codz UI polish — responsive account, help and notification surfaces */
.profile-avatar-wrap,.account-avatar{border-radius:50%;overflow:hidden;flex-shrink:0}
.profile-avatar-wrap img,.account-avatar img,.profile-edit-avatar img,.avatar-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%}
.profile-edit-avatar,.avatar-preview{border-radius:50%;overflow:hidden;aspect-ratio:1/1}
.account-heading{display:flex;align-items:center;gap:12px;padding:2px 0 14px;border-bottom:1px solid var(--line)}
.account-heading .account-avatar{width:44px;height:44px;flex:0 0 44px}
.account-heading strong{margin:0;display:block}
.account-heading p{margin:4px 0 0;font-size:12px}
.account-token-line{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:15px;font-size:12px}
.account-token-line strong{font-size:12px;margin:0}
.matrix-track{position:relative;height:10px;margin:10px 0 14px;overflow:hidden;border:1px solid var(--line);border-radius:999px;background:repeating-linear-gradient(90deg,#0b0b0d 0 5px,#f4f4f4 5px 9px)}
.matrix-track span{display:block;height:100%;width:0;max-width:100%;background:repeating-linear-gradient(90deg,#f8f8f8 0 5px,#101012 5px 9px);background-size:18px 100%;box-shadow:0 0 10px #fff8;transition:width .45s cubic-bezier(.2,.8,.2,1);animation:matrix-scan 1.4s linear infinite}
@keyframes matrix-scan{from{background-position:0 0}to{background-position:18px 0}}
.account-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 0}
.account-links a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;margin:0;padding:11px 4px;border:1px solid var(--line);border-radius:11px;text-align:center;text-decoration:none;font-size:10px;line-height:1.25}
.account-links a .fi{font-size:16px}
.account-links a:hover{border-color:var(--text);transform:translateY(-1px)}
#account-logout{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);text-align:center}
.help-wrap{position:relative;margin-bottom:10px}
.help-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:10px 11px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.help-toggle:hover,.help-toggle[aria-expanded="true"]{background:var(--surface);color:var(--text);border-color:var(--line)}
.help-toggle .help-chevron{margin-left:auto;font-size:11px;transition:transform .2s}
.help-toggle[aria-expanded="true"] .help-chevron{transform:rotate(180deg)}
.help-menu{position:absolute;left:0;right:0;bottom:calc(100% + 7px);z-index:60;display:grid;gap:3px;padding:7px;border:1px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 18px 50px #0003;animation:codz-menu-in .16s ease-out}
.help-menu[hidden]{display:none}
.help-menu a,.help-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:9px;background:transparent;color:var(--text);font:inherit;font-size:12px;text-align:left;text-decoration:none;cursor:pointer}
.help-menu a:hover,.help-menu button:hover{background:var(--surface)}
.help-menu .fi{width:16px;text-align:center}
@keyframes codz-menu-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.discord-top{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.discord-top .fi{font-size:17px}
.theme-symbol{display:inline-block;filter:drop-shadow(0 1px 3px #8883);transition:transform .25s,filter .25s}
#theme-toggle:hover .theme-symbol{transform:rotate(-16deg) scale(1.08);filter:drop-shadow(0 0 5px #8888)}
.codz-notifications{position:fixed;right:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:100;display:flex;flex-direction:column;align-items:stretch;gap:10px;width:min(370px,calc(100vw - 28px));pointer-events:none}
.codz-notification{pointer-events:auto;overflow:hidden;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--bg);color:var(--text);box-shadow:0 18px 60px #0003;animation:notification-in .24s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(18px)}
.codz-notification.is-error{border-color:#b423184d}
.codz-notification.is-error .notification-mark{color:#d92d20}
.notification-head{display:flex;align-items:center;gap:9px;min-width:0}
.notification-mark{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:14px}
.notification-head strong{flex:1;font-size:13px;line-height:1.35}
.notification-close{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.notification-close:hover{background:var(--surface);color:var(--text)}
.notification-copy{margin:10px 0 0 39px;color:var(--muted);font-size:12px;line-height:1.55}
.notification-actions{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0 39px}
.notification-action{display:inline-flex;align-items:center;justify-content:center;min-height:31px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);font:inherit;font-size:11px;font-weight:650;text-decoration:none;cursor:pointer}
.notification-action:hover{border-color:var(--text);transform:translateY(-1px)}
.notification-reply{background:var(--text);color:var(--bg);border-color:var(--text)}
@keyframes notification-in{from{opacity:0;transform:translate3d(0,10px,0) scale(.98)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
.conversation{overflow-anchor:auto;overscroll-behavior:contain;scroll-padding-bottom:170px}
.message{overflow-anchor:auto}
@media(max-width:760px){
 .codz-notifications{right:10px;bottom:max(10px,env(safe-area-inset-bottom));width:min(370px,calc(100vw - 20px))}
 .account-popover{right:10px;width:min(320px,calc(100vw - 20px))}
 .account-links a{font-size:10px}
 .top-actions{gap:4px}
 .discord-top .fi{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
 .matrix-track span,.codz-notification,.help-menu{animation:none!important}
 .theme-symbol,.account-links a,.notification-action{transition:none!important}
}

.username-rules[hidden],.password-help[hidden]{display:none!important}


/* Codz UI repair pass — scrolling, avatar geometry, Markdown, dialogs and animated Flaticon controls */
html,body{width:100%;min-height:100%}body:has(.shell){height:100%;overflow:hidden}
.shell{height:100dvh;min-height:0;overflow:hidden}
.main{min-width:0;min-height:0;height:100%;overflow:hidden}
.conversation{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scroll-behavior:smooth;scroll-padding-block:18px 190px;scrollbar-gutter:stable;padding-bottom:190px!important}
.message{overflow-anchor:auto}
#chat-form.composer{left:260px;right:0;bottom:0;z-index:30}
.shell.sidebar-collapsed>.sidebar{width:0!important;min-width:0!important;flex-basis:0!important;padding-left:0!important;padding-right:0!important;border-right-width:0!important;opacity:0;pointer-events:none}
.shell.sidebar-collapsed #chat-form.composer{left:0!important}
.sidebar{min-width:0;transition:width .24s ease,flex-basis .24s ease,padding .24s ease,transform .24s ease,opacity .18s ease}
.profile-row .profile .profile-avatar-wrap{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;max-width:30px!important;max-height:30px!important;flex:0 0 30px!important;aspect-ratio:1/1!important;position:relative;overflow:hidden;border-radius:50%;isolation:isolate}
.profile-row .profile-avatar-wrap img,#profile-avatar{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;max-width:none!important;max-height:none!important;flex:none!important;aspect-ratio:1/1;object-fit:cover!important;object-position:center!important;border-radius:50%;margin:0;padding:0}
.profile-row .profile-avatar-wrap img[hidden],.profile-row .profile-avatar-wrap i[hidden]{display:none!important}
.profile-row .profile-avatar-wrap .ui-icon{flex:0 0 auto!important}
.message-content{font-size:15px;line-height:1.8;overflow-wrap:anywhere;word-break:normal}
.message-content p{margin:0 0 12px}
.message-content p:last-child{margin-bottom:0}
.message-content h1,.message-content h2,.message-content h3{font-weight:700;line-height:1.3;letter-spacing:-.025em;margin:22px 0 10px}
.message-content h1{font-size:1.45rem}.message-content h2{font-size:1.25rem}.message-content h3{font-size:1.08rem}
.message-content ul,.message-content ol{padding-left:24px;margin:10px 0 16px;display:grid;gap:7px}
.message-content li::marker{color:var(--muted)}
.message-content blockquote{margin:12px 0;padding:9px 14px;border-left:3px solid var(--muted);border-radius:0 10px 10px 0;background:var(--surface);color:var(--muted)}
.message-content hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.message-content a{color:var(--text);text-decoration:underline;text-decoration-color:var(--muted);text-underline-offset:3px}
.md-inline{padding:2px 5px;border:1px solid var(--line);border-radius:5px;background:var(--surface);font: .9em ui-monospace,SFMono-Regular,Consolas,monospace}
.md-code{overflow:auto;margin:14px 0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--sidebar);color:var(--text);font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre}
.message-content pre code{font:inherit}
.message.user{border:1px solid var(--line);border-radius:20px 20px 6px 20px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 78%,var(--bg)));box-shadow:0 4px 18px #00000006}
.message.assistant{padding:12px 4px 16px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:4px}
.composer-input{border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 8px 30px #0000000a;transition:border-color .2s,box-shadow .2s,transform .2s}
.composer-input:focus-within{border-color:color-mix(in srgb,var(--text) 38%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 5%,transparent),0 12px 32px #0000000b;transform:translateY(-1px)}
.composer textarea{max-height:220px;line-height:1.65}
.settings input:not([type=checkbox]):not([type=radio]),.settings select,.settings textarea,.page input:not([type=checkbox]):not([type=radio]),.page select,.page textarea,.codz-dialog-input{width:100%;min-height:44px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);outline:0;transition:border-color .18s,box-shadow .18s,background .18s}
.settings input:focus,.settings select:focus,.settings textarea:focus,.page input:focus,.page select:focus,.page textarea:focus,.codz-dialog-input:focus{border-color:var(--muted);box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 6%,transparent);background:var(--bg)}
.settings button,.page button{transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
.settings button:hover,.page button:hover{transform:translateY(-1px)}
.ui-icon,.fi{transition:transform .2s ease,color .2s ease,filter .2s ease}
button:hover>.ui-icon,button:hover .ui-icon,a:hover>.ui-icon,a:hover .ui-icon{transform:translateY(-1px) scale(1.08)}
.nav-item:hover .ui-icon,.history-item:hover .ui-icon{filter:drop-shadow(0 2px 4px #0002)}
#menu-toggle:hover .ui-icon{animation:codz-menu-nudge .34s ease}
.send-button:hover .ui-icon{transform:translateY(-2px) scale(1.12)}
@keyframes codz-menu-nudge{0%,100%{transform:rotate(0)}35%{transform:rotate(-9deg)}70%{transform:rotate(7deg)}}
.codz-notification{position:relative}
.notification-head{gap:9px}
.notification-head strong{min-width:0}
.notification-head-actions{display:flex;align-items:center;gap:3px;flex:0 0 auto;margin-left:auto}
.notification-head-actions .notification-close{width:30px;height:30px;flex:0 0 30px;border:1px solid transparent}
.notification-head-actions .notification-close:hover{border-color:var(--line)}
.notification-head-actions .notification-reply-icon{background:var(--surface);color:var(--text)}
.notification-actions{margin-left:39px}
.codz-dialog{width:min(440px,calc(100vw - 28px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--text);box-shadow:0 28px 100px #0005;overflow:auto}
.codz-dialog::backdrop{background:#08080bb8;backdrop-filter:blur(5px)}
.codz-dialog-form{padding:22px}
.codz-dialog-header{display:flex;align-items:center;gap:14px;justify-content:space-between}
.codz-dialog-header h2{margin:0;font-size:19px;line-height:1.3;letter-spacing:-.025em}
.codz-dialog-close{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}
.codz-dialog-copy{margin:10px 0 18px;color:var(--muted);font-size:13px;line-height:1.65}
.codz-dialog-input{margin:4px 0 18px}
.codz-dialog-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.codz-dialog-cancel,.codz-dialog-submit{min-height:40px;padding:9px 14px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);font-size:13px;font-weight:650}
.codz-dialog-submit{background:var(--text);border-color:var(--text);color:var(--bg)}
.codz-dialog-submit.is-danger{background:#b42332;border-color:#b42332;color:white}
@media(max-width:760px){
 html,body{overscroll-behavior:none}
 .shell.sidebar-collapsed>.sidebar{width:min(290px,85vw)!important;flex-basis:auto!important;padding:10px!important;border-right:1px solid var(--line)!important;opacity:1;pointer-events:auto;transform:translateX(-100%)}
 .shell.sidebar-collapsed>.sidebar.open{transform:translateX(0)}
 #chat-form.composer{left:0!important;right:0;padding:8px 10px max(10px,env(safe-area-inset-bottom))!important}
 #conversation.conversation{padding-bottom:calc(150px + env(safe-area-inset-bottom))!important;scroll-padding-bottom:calc(160px + env(safe-area-inset-bottom))}
 .message-content{font-size:14px}
 .message.user{max-width:92%}
 .codz-dialog-form{padding:18px}
}
@media(prefers-reduced-motion:reduce){.ui-icon,.fi,button,a,.composer-input{transition:none!important}.ui-icon{animation:none!important}}


/* Polished form fields and restrained motion across auth and admin screens */
.auth-shell,.setup-card,.admin-card{animation:codz-card-enter .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes codz-card-enter{from{opacity:0;transform:translateY(9px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}
.auth-shell .field input,.setup-card .field input,.admin-wrap .field input,.admin-wrap .provider-card input{transition:border-color .18s,box-shadow .18s,background .18s}
.auth-shell .field input:focus,.setup-card .field input:focus,.admin-wrap .field input:focus,.admin-wrap .provider-card input:focus{outline:0;border-color:var(--muted);box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 7%,transparent)}
.auth-shell .provider-button,.auth-shell .primary,.setup-card .primary,.admin-wrap button{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease}
.auth-shell .provider-button:hover,.auth-shell .primary:hover,.setup-card .primary:hover,.admin-wrap button:hover{transform:translateY(-1px);box-shadow:0 7px 20px #0000000c}
.auth-shell .auth-brand .fi,.setup-card .brand .fi{transition:transform .22s ease}
.auth-shell .auth-brand:hover .fi,.setup-card .brand:hover .fi{transform:translateY(-2px) rotate(-5deg)}
[aria-invalid="true"]{border-color:#c43d4b!important;box-shadow:0 0 0 3px #c43d4b14}
@media(prefers-reduced-motion:reduce){.auth-shell,.setup-card,.admin-card{animation:none!important}}


/* Codz reliability patch: keep the conversation as the dedicated desktop scroll surface. */
html,body{width:100%;min-width:0;overflow:hidden}
.shell{display:flex;height:100vh;height:100dvh;min-height:0;overflow:hidden}
.main{display:flex;flex:1 1 0;min-width:0;min-height:0;height:100%;overflow:hidden}
.main>.conversation{flex:1 1 0;min-height:0;min-width:0;overflow-y:auto!important;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y;scrollbar-gutter:stable;padding-bottom:36px}
.main>.composer{flex:0 0 auto;position:relative;z-index:2}
.main.empty-state>.conversation:empty{flex:0 0 0}
.message-content{white-space:normal;overflow-wrap:anywhere;line-height:1.85}
.message-content p{margin:0 0 1rem}
.message-content p:last-child{margin-bottom:0}
.message-content pre{margin:16px 0;padding:18px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);line-height:1.65}
.message-content pre code{display:block;min-width:max-content;font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;font-size:.9em}
.message-content :not(pre)>code{padding:.18em .4em;border-radius:5px;background:var(--surface);font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace}
.message-content h1,.message-content h2,.message-content h3{line-height:1.35;margin:1.3em 0 .65em;letter-spacing:-.025em}
.message-content ul,.message-content ol{padding-left:1.5rem;margin:.7rem 0 1rem}
.message-content li{padding-left:.25rem;margin:.35rem 0}
.message-content blockquote{margin:1rem 0;padding:10px 16px;border-left:3px solid var(--line);color:var(--muted);background:var(--surface);border-radius:0 10px 10px 0}
.composer-input{gap:10px}
.composer textarea{line-height:1.7;padding:12px 14px}
.composer-tools{gap:8px}
.attach-button{display:inline-grid!important;place-items:center}
.attach-button .ui-icon{animation:codz-icon-breathe 3s ease-in-out infinite}
.ui-icon{vertical-align:middle;flex-shrink:0}
button .ui-icon{transition:transform .2s ease,color .2s ease}
button:hover .ui-icon{transform:translateY(-1px)}
.sidebar .new-chat .ui-icon,.nav-item .ui-icon,.top-actions .ui-icon{animation:codz-icon-enter .35s ease both}
@keyframes codz-icon-enter{from{opacity:.35;transform:translateY(3px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes codz-icon-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.icon-button,.message-action,.history-icon{min-width:32px;min-height:32px}
button:disabled{cursor:wait;opacity:.55}
.field-error,.form-error{border-color:#d84a4a!important;box-shadow:0 0 0 3px #d84a4a18}
#attachment-list{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.attachment-chip{display:flex;align-items:center;gap:9px;max-width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:12px}
.attachment-chip .attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.attachment-chip button{display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:7px;background:transparent}
.attachment-chip button:hover{background:var(--line)}
.back-link{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:13px;transition:transform .18s ease}
.back-link:hover{transform:translateX(-2px)}
@media(max-width:760px){.main>.conversation{padding-bottom:22px}.attachment-chip .attachment-name{max-width:180px}}
@media(prefers-reduced-motion:reduce){.ui-icon,.attach-button .ui-icon,button .ui-icon{animation:none!important;transition:none!important}}

/* Readable code blocks with language-aware accents */
.message-content pre[data-language="js"] code,.message-content pre[data-language="javascript"] code,.message-content pre[data-language="ts"] code,.message-content pre[data-language="typescript"] code{color:#c792ea}
.message-content pre[data-language="json"] code{color:#89ddff}
.message-content pre[data-language="html"] code,.message-content pre[data-language="xml"] code{color:#f78c6c}
.message-content pre[data-language="css"] code{color:#c3e88d}
.message-content pre[data-language="bash"] code,.message-content pre[data-language="sh"] code,.message-content pre[data-language="shell"] code{color:#ffcb6b}
.message-content pre[data-language="python"] code,.message-content pre[data-language="py"] code{color:#82aaff}
.message-content pre[data-language="sql"] code{color:#89ddff}
.message-content pre[data-language="rust"] code,.message-content pre[data-language="rs"] code,.message-content pre[data-language="go"] code{color:#f78c6c}


/* Scroll fix: allow normal pages to scroll; confine the chat app to its own scroll area. */
html,body{overflow-x:hidden;overflow-y:auto}
html:has(.shell),body:has(.shell){height:100%;overflow:hidden}
body:has(.shell) .shell{height:100vh;height:100dvh;min-height:0;overflow:hidden}
body:has(.shell) .main{display:flex;flex-direction:column;min-height:0;overflow:hidden}
body:has(.shell) .main>.conversation{display:flex;flex:1 1 0;min-height:0;overflow-x:hidden;overflow-y:auto!important;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior-y:contain}
body:has(.shell) .main>.composer{flex:0 0 auto}
/* Codz 2026: reliable desktop scrolling, readable layouts and locally rendered icons. */
html,body{width:100%;height:100%;min-width:0;overflow:hidden}
body:has(.shell){height:100vh;height:100dvh;overscroll-behavior:none}
.shell{display:flex;width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden}
.main{display:flex;flex:1 1 0;flex-direction:column;min-width:0;min-height:0;height:100%;overflow:hidden}
.main>.topbar{flex:0 0 auto}
.main>.welcome{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto;padding:24px 0}
.main:has(#conversation:not(:empty))>.welcome{display:none}
.main>#conversation.conversation{display:flex;flex:1 1 0;height:0;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto!important;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-gutter:stable;padding:14px 20px 190px!important}
#conversation .message{flex:0 0 auto}
#chat-form.composer{position:fixed!important;left:260px;right:0;bottom:0;z-index:30;margin:0!important;padding:12px 16px max(12px,env(safe-area-inset-bottom))!important;background:linear-gradient(to bottom,transparent,var(--bg) 20%);box-sizing:border-box}
.shell.sidebar-collapsed~#chat-form.composer{left:0}
.codz-svg-icon{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;flex:none;overflow:visible;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:codz-icon-arrive .32s cubic-bezier(.2,.8,.2,1) both}
.fi.codz-icon-host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;font-size:0!important;line-height:1!important;color:inherit;flex-shrink:0}
.icon-button .codz-svg-icon,.message-action .codz-svg-icon{width:19px;height:19px}
button:hover>.codz-icon-host .codz-svg-icon,button:hover>.codz-svg-icon,.nav-item:hover .codz-svg-icon{transform:translateY(-1px) scale(1.06)}
.attach-button .codz-svg-icon{animation:codz-icon-arrive .32s ease both,codz-icon-breathe 3.2s ease-in-out 1s infinite}
#theme-toggle:hover .codz-svg-icon{transform:rotate(-12deg) scale(1.06)}
.codz-menu .codz-svg-icon,.nav-item .codz-svg-icon{width:17px;height:17px}
@keyframes codz-icon-arrive{from{opacity:0;transform:translateY(3px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes codz-icon-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media(max-width:760px){.main>#conversation.conversation{padding:10px 12px calc(170px + env(safe-area-inset-bottom))!important}#chat-form.composer{left:0!important;right:0;padding:8px 10px max(10px,env(safe-area-inset-bottom))!important}.main>.welcome{padding:16px 0}}
@media(prefers-reduced-motion:reduce){.codz-svg-icon,.attach-button .codz-svg-icon{animation:none!important;transition:none!important}}

/* Typography and language-aware code tokens */
:root{font-family:"DM Sans",Inter,"Segoe UI Variable","Segoe UI",system-ui,sans-serif}
body,button,input,textarea,select{font-family:"DM Sans",Inter,"Segoe UI Variable","Segoe UI",system-ui,sans-serif}
h1,h2,h3,.welcome h1{font-family:Manrope,"DM Sans",Inter,system-ui,sans-serif;letter-spacing:-.035em}
code,pre,.md-code code{font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace}
.tok-keyword{color:#8b5cf6;font-weight:600}.tok-string{color:#0d9488}.tok-number{color:#d97706}.tok-comment{color:#8b8b96;font-style:italic}.tok-tag{color:#db2777}.tok-punct{color:var(--muted)}
:root[data-theme="dark"] .tok-keyword{color:#c4b5fd}:root[data-theme="dark"] .tok-string{color:#5eead4}:root[data-theme="dark"] .tok-number{color:#fbbf24}:root[data-theme="dark"] .tok-tag{color:#f9a8d4}


/* Scroll hotfix: only lock the chat shell; regular pages (settings, FAQ, legal, login) must scroll normally. */
html,body{overflow-x:hidden;overflow-y:auto}
html:has(body>.shell),body:has(>.shell){height:100%;overflow:hidden}
body:has(>.shell)>.shell{height:100vh;height:100dvh;min-height:0;overflow:hidden}
body:has(>.shell) .main{min-height:0;overflow:hidden}
body:has(>.shell) #conversation.conversation{flex:1 1 0;min-height:0;height:0;overflow-x:hidden;overflow-y:auto!important;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding-bottom:190px!important}
@media(max-width:760px){body:has(>.shell) #conversation.conversation{padding-bottom:calc(170px + env(safe-area-inset-bottom))!important}}


/* Settings page scroll fix: global chat layout must never trap standalone pages. */
html:has(body>.settings),body:has(>.settings){height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important}
body:has(>.settings){min-height:100vh!important;min-height:100dvh!important;height:auto!important;overscroll-behavior-y:auto!important}
body:has(>.settings)>.settings{height:auto!important;min-height:100vh;overflow:visible!important;max-height:none!important;padding-bottom:48px}
body:has(>.settings) .panel{overflow:visible}
@media(max-width:760px){body:has(>.settings)>.settings{margin:12px auto;padding:18px 14px 40px}}


/* Codz UI refresh: custom controls, cards and accessible file picker */
:root{font-family:"Outfit",Inter,system-ui,sans-serif;--panel-radius:20px}
body,button,input,textarea,select{font-family:"Outfit",Inter,system-ui,sans-serif}
h1,h2,h3,.welcome h1{font-family:"Outfit",Inter,system-ui,sans-serif;letter-spacing:-.035em}
.composer-input{border:1px solid var(--line);border-radius:22px;background:var(--bg);box-shadow:0 8px 28px #00000008;padding:9px 10px 9px 14px;gap:8px}
.composer-input:focus-within{border-color:var(--text);box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 7%,transparent)}
.composer textarea{padding:11px 8px;min-height:44px;font-size:15px;line-height:1.55}
.attach-button{display:inline-grid!important;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--text);flex:0 0 38px;text-decoration:none}
.attach-button svg,.theme-symbol svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.attach-button:hover{background:var(--line);transform:translateY(-1px)}
.file-picker-input{position:fixed!important;left:-10000px!important;top:0!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.theme-symbol{display:inline-grid;place-items:center;width:20px;height:20px}
.icon-button:has(.theme-symbol){border:1px solid var(--line);border-radius:12px;transition:background .18s ease,transform .18s ease}
.icon-button:has(.theme-symbol):hover{background:var(--surface);transform:rotate(-7deg)}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select){border-radius:12px;transition:border-color .16s ease,box-shadow .16s ease}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select):focus{border-color:var(--text);box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 8%,transparent)}
button,.button-link{transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease}
button:not(:disabled):hover,.button-link:hover{transform:translateY(-1px)}
.codz-notification,.redeem-card,.account-popover,.credits-popover,.codz-menu{border-radius:20px;box-shadow:0 24px 70px #00000018}
.attachment-chip{border-radius:14px;padding:9px 11px;box-shadow:0 3px 12px #00000005}
@media(max-width:600px){.composer-input{border-radius:20px;padding:7px;gap:6px}.composer textarea{padding:9px 5px}.attach-button{width:36px;height:36px;flex-basis:36px}}
@media(prefers-reduced-motion:reduce){button,.button-link,.attach-button,.icon-button:has(.theme-symbol){transition:none!important}}

/* Settings scroll override: allow the page itself to grow and scroll. */
html:has(body > main.settings),body:has(> main.settings){height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:scroll!important}
body:has(> main.settings){display:block!important;height:auto!important;min-height:100vh!important;min-height:100dvh!important;position:static!important;overscroll-behavior-y:auto!important}
body > main.settings{display:block!important;position:relative!important;height:auto!important;min-height:100vh!important;max-height:none!important;overflow:visible!important;flex:none!important;contain:none!important;transform:none!important;padding-bottom:60px!important}


/* Codz 2026 accessibility and message polish */
body,button,input,textarea,select{font-family:"DM Sans",Inter,system-ui,-apple-system,sans-serif}
h1,h2,h3,.welcome h1{font-family:"DM Sans",Inter,system-ui,sans-serif;letter-spacing:-.025em}
.message-content{font-family:"DM Sans",Inter,system-ui,sans-serif;line-height:1.8;overflow-wrap:anywhere}
.message-content p{margin:0 0 1rem}
.message-content p:last-child{margin-bottom:0}
.message-content p+p{margin-top:.25rem}
.message-content ul,.message-content ol{margin:.75rem 0 1rem;padding-left:1.5rem}
.message-content li{margin:.35rem 0}
.message-content pre,.message-content .md-code{font-family:"JetBrains Mono",ui-monospace,monospace}
i.fi.ui-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:0 0 auto}
i.fi.ui-icon svg,.ui-icon svg{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button .ui-icon,.icon-button .ui-icon,.message-action .ui-icon{transition:transform .22s cubic-bezier(.2,.8,.2,1),color .22s}
button:hover .ui-icon,.icon-button:hover .ui-icon,.message-action:hover .ui-icon{transform:scale(1.14) rotate(-4deg)}
button:active .ui-icon,.icon-button:active .ui-icon,.message-action:active .ui-icon{transform:scale(.9)}
.theme-symbol svg{animation:codz-icon-pop .28s cubic-bezier(.2,.8,.2,1)}
@keyframes codz-icon-pop{0%{opacity:.35;transform:scale(.65) rotate(-18deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.message-actions{gap:8px}
.message-action{transition:transform .2s ease,border-color .2s ease,background .2s ease}
.message-action:hover{transform:translateY(-2px)}
.codz-notification{animation:codz-notice-in .24s cubic-bezier(.2,.8,.2,1)}
@keyframes codz-notice-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.codz-message-dialog{width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 28px);border:1px solid var(--line);border-radius:22px;padding:0;background:var(--bg);color:var(--text);box-shadow:0 28px 90px #0005}
.codz-message-dialog::backdrop{background:#06070b99;backdrop-filter:blur(5px)}
.codz-message-dialog .codz-dialog-form{padding:24px;display:grid;gap:14px}
.codz-message-dialog .codz-dialog-copy{margin:0;color:var(--muted);line-height:1.65}
.codz-message-dialog .codz-dialog-input{box-sizing:border-box;width:100%;min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface);color:var(--text);font:inherit;resize:vertical}
.codz-message-dialog label{display:grid;gap:8px;font-weight:600}
.help-menu{max-height:min(65vh,520px);overflow:auto}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.plan-buy[hidden],.plan-current[hidden]{display:none!important}.thinking .message-actions{display:none!important}.legal-page{max-width:900px}.legal-page .panel p,.legal-page .panel li{line-height:1.85}


/* Codz typography refresh */
body,button,input,textarea,select{font-family:"Inter",system-ui,-apple-system,sans-serif}
h1,h2,h3,.welcome h1,.settings h1{font-family:"Outfit","Inter",system-ui,sans-serif;letter-spacing:-.025em}
.message-content{font-family:"Inter",system-ui,sans-serif;line-height:1.8}
.message-content p{margin:0 0 1em;line-height:1.8}
.message-content p:last-child{margin-bottom:0}

/* Codz icon visibility hotfix: the Flaticon fallback host uses font-size:0, so SVG geometry must use fixed/rem units instead of em. */
.fi.codz-icon-host .codz-svg-icon,.fi.codz-icon-host>svg.codz-svg-icon,.codz-svg-icon{width:1.15rem!important;height:1.15rem!important;min-width:1.15rem!important;min-height:1.15rem!important;flex:0 0 1.15rem!important;display:inline-block!important;visibility:visible!important;opacity:1!important;overflow:visible!important;transform-origin:center;animation:codz-icon-arrive .36s cubic-bezier(.2,.8,.2,1) both;transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease}
.nav-item .codz-svg-icon,.codz-menu .codz-svg-icon{width:17px!important;height:17px!important;min-width:17px!important;min-height:17px!important;flex-basis:17px!important}
.history-heading .codz-svg-icon,.search-box .codz-svg-icon{width:15px!important;height:15px!important;min-width:15px!important;min-height:15px!important;flex-basis:15px!important}
.profile .codz-svg-icon,.account-avatar .codz-svg-icon{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;flex-basis:20px!important}
button:hover .codz-svg-icon,a:hover .codz-svg-icon,.nav-item:hover .codz-svg-icon{animation:codz-icon-hover .38s cubic-bezier(.2,.8,.2,1) both;filter:drop-shadow(0 2px 3px #0002)}
button:active .codz-svg-icon,a:active .codz-svg-icon{animation:codz-icon-press .18s ease-out both}
@keyframes codz-icon-hover{0%{transform:translateY(0) scale(1) rotate(0)}45%{transform:translateY(-2px) scale(1.14) rotate(-6deg)}100%{transform:translateY(0) scale(1.04) rotate(0)}}
@keyframes codz-icon-press{0%{transform:scale(1)}55%{transform:scale(.82) rotate(4deg)}100%{transform:scale(.94)}}
@media(prefers-reduced-motion:reduce){.codz-icon-host .codz-svg-icon,.codz-svg-icon{animation:none!important;transition:none!important}}

/* Codz 2026 UI polish: remove doubled font glyphs and anchor token details when supported. */
.fi.codz-icon-host{font-size:0!important;line-height:0!important;display:inline-flex!important;align-items:center;justify-content:center;vertical-align:middle}
.fi.codz-icon-host::before,.fi.codz-icon-host::after{content:none!important;display:none!important}
.codz-icon-host .codz-svg-icon,.codz-icon-host .codz-brand-icon{display:block!important;object-fit:contain!important;flex:0 0 1.15rem!important;width:1.15rem!important;height:1.15rem!important;min-width:1.15rem!important;min-height:1.15rem!important}
.codz-icon-host .codz-brand-icon{border-radius:0;animation:codz-icon-arrive .28s ease-out both}
.credits-popover{max-width:min(360px,calc(100vw - 24px));overflow-wrap:anywhere}
@supports (position-anchor: --codz-token-anchor){
 #credits-open{anchor-name:--codz-token-anchor}
 #credits-popover{position:fixed;position-anchor:--codz-token-anchor;position-area:bottom span-right;position-try-fallbacks:flip-block,flip-inline;inset:auto;margin-block-start:8px;z-index:1000}
}
@media(max-width:760px){.credits-popover{width:min(340px,calc(100vw - 24px));max-width:calc(100vw - 24px)}}
@media(prefers-reduced-motion:reduce){.codz-icon-host .codz-brand-icon{animation:none!important}}

/* Codz responsive polish: avoid clipped controls and keep the composer usable on small screens. */
html,body{max-width:100%;overflow-x:hidden}
button,input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select,.button-link{font:inherit;appearance:none;-webkit-appearance:none}
button,.button-link{transition:background-color .16s ease,border-color .16s ease,transform .16s ease,opacity .16s ease}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.shell,.main,.topbar,.composer,.composer-input,.composer-tools,.conversation{min-width:0;max-width:100%}
.help-wrap{isolation:isolate}
.help-menu{pointer-events:auto;max-height:min(65vh,520px);overflow-y:auto;overscroll-behavior:contain}
.help-menu a,.help-menu button{min-height:40px}
.send-button{width:42px;height:42px;min-width:42px;min-height:42px;border-radius:14px;flex:0 0 42px}
.send-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.send-button:active{transform:scale(.96)}
.send-button:disabled{opacity:.45;cursor:not-allowed}
.attach-button{width:40px;height:40px;min-width:40px;min-height:40px;display:grid;place-items:center;border-radius:12px}
@media(max-width:760px){
  .shell{height:100dvh;height:100svh;overflow:hidden}
  .main{width:100%;height:100%;padding-bottom:env(safe-area-inset-bottom)}
  .topbar{gap:5px;padding:8px 10px}
  .top-actions{gap:4px;min-width:0}
  .credit-pill{gap:4px;padding:5px;font-size:11px;white-space:nowrap}
  .icon-button{flex:0 0 34px}
  .conversation{width:100%;padding-left:12px;padding-right:12px;overflow-x:hidden}
  .message{max-width:100%;overflow-wrap:anywhere}
  .composer{padding:8px 10px calc(10px + env(safe-area-inset-bottom));margin-bottom:0}
  .composer-input{gap:5px;padding:6px 7px 6px 13px;border-radius:22px}
  .composer textarea{font-size:16px;min-height:42px;max-height:160px}
  .composer-tools{gap:3px;flex:0 0 auto}
  .composer-footer{gap:6px;align-items:flex-start;flex-wrap:wrap}
  .composer-hint{max-width:56%;font-size:10px}
  .welcome{width:calc(100% - 28px);padding-top:14px}
  .welcome h1{font-size:clamp(22px,6vw,28px);line-height:1.2}
  .settings,.page{width:calc(100% - 24px);max-width:100%;padding:14px;margin:12px auto}
  .settings .panel,.panel{min-width:0;max-width:100%;padding:15px}
  .settings input,.settings select,.settings textarea{width:100%;max-width:100%;min-width:0}
  .settings .actions{align-items:stretch}
  .settings .actions>*{max-width:100%}
  .plan-grid{grid-template-columns:minmax(0,1fr)}
  .modal-backdrop{padding:10px}
  .api-modal{padding:18px;max-height:calc(100dvh - 20px);overflow-y:auto}
}
@media(max-width:380px){
  .topbar{padding-inline:7px}
  .mobile-brand{font-size:16px}
  .credit-pill strong{max-width:50px;overflow:hidden;text-overflow:ellipsis}
  .composer-hint{display:none}
  .composer-footer{justify-content:center}
}

/* Legal/help pages use the same compact, theme-aware card system. */
.legal-page{width:min(820px,calc(100% - 32px));margin:36px auto;padding:24px}.legal-page .security-action{margin-top:22px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.legal-page .security-action p{color:var(--muted);line-height:1.75}.legal-page ul{padding-left:22px;line-height:1.9;color:var(--muted)}@media(max-width:600px){.legal-page{width:calc(100% - 20px);margin:12px auto;padding:14px}.legal-page .security-action{padding:15px}}

/* Custom select affordance that stays visible in both themes. */
select{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236e6e80%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}

/* Codz layout refresh */
.sidebar-bottom{margin-top:auto!important;flex:none!important}
.sidebar{min-height:0}
.main.empty-state{position:relative}
.main.empty-state .welcome{position:absolute!important;left:50%!important;top:calc(50% - 250px)!important;transform:translateX(-50%)!important;flex:none!important;width:min(768px,calc(100% - 36px))!important;max-width:768px;margin:0!important;padding:0!important;z-index:2}
.main.empty-state .conversation:empty{flex:1 1 auto!important;min-height:0!important;padding:0!important;margin:0!important}
.main.empty-state #chat-form.composer{position:absolute!important;left:50%!important;right:auto!important;top:calc(50% + 112px)!important;bottom:auto!important;transform:translateX(-50%)!important;width:min(768px,calc(100% - 36px))!important;max-width:768px;margin:0!important;padding:8px 0 10px!important;background:transparent!important;z-index:4}
.main.empty-state #chat-form .composer-input{max-width:none;width:100%;background:var(--surface);border-color:var(--line);box-shadow:0 12px 40px #0000000a}
.main.empty-state .fineprint{position:absolute;top:calc(50% + 215px);left:50%;transform:translateX(-50%);width:calc(100% - 32px);margin:0;text-align:center;pointer-events:none}
@media(max-width:760px){
 .sidebar-bottom{margin-top:auto!important;padding-bottom:max(4px,env(safe-area-inset-bottom))}
 .main.empty-state .welcome{top:calc(50% - 220px)!important;width:calc(100% - 28px)!important}
 .main.empty-state #chat-form.composer{top:calc(50% + 105px)!important;width:calc(100% - 24px)!important;padding:6px 0 8px!important}
 .main.empty-state .fineprint{top:calc(50% + 205px);font-size:10px}
}
@media(max-height:620px){
 .main.empty-state .welcome{top:calc(50% - 190px)!important}
 .main.empty-state #chat-form.composer{top:calc(50% + 100px)!important}
 .main.empty-state .welcome .hero-logo{width:26px;height:32px;margin-bottom:6px}
 .main.empty-state .welcome-copy{margin:6px 0 12px}
 .main.empty-state .suggestions{gap:5px}
 .main.empty-state .fineprint{display:none}
}
.plans-page-grid .plan-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:26px 24px;border-radius:22px;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.plans-page-grid .plan-card:hover{transform:translateY(-5px);border-color:var(--muted);box-shadow:0 20px 55px #00000012}
.plans-page-grid .plan-card h3{font-size:21px;letter-spacing:-.035em;margin:4px 0 0}
.plans-page-grid .plan-card>strong{font-size:28px;letter-spacing:-.05em}
.plans-page-grid .plan-card>p{margin:0 0 5px;line-height:1.65;color:var(--muted)}
.plans-page-grid .plan-card ul{display:grid;gap:9px;margin:4px 0 16px;padding-left:18px}
.plans-page-grid .plan-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--surface);border:1px solid var(--line)}
.plans-page-grid .plan-icon .codz-svg-icon{width:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important;flex-basis:23px!important}
.plans-page-grid .plan-card.featured{border-color:var(--text);box-shadow:0 14px 45px #0000000d}
.plans-page-grid .plan-tag{align-self:flex-start;position:static;margin:0 0 0 auto;padding:5px 10px;border-radius:999px;background:var(--text);color:var(--bg);font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.plans-page-grid .plan-buy{margin-top:auto;min-height:48px;border-radius:13px;font-weight:750;letter-spacing:-.01em;box-shadow:0 8px 22px #0000000b}
.plans-page-grid .plan-buy:hover{transform:translateY(-2px);box-shadow:0 12px 28px #00000018}
.plans-page-grid .plan-current{margin-top:auto;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-align:center;font-size:13px;font-weight:650}
.plans-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;padding:18px 0 8px;border-top:1px solid var(--line)}
.plans-footer a{color:var(--muted);text-decoration:none}
.plans-footer a:hover{color:var(--text);text-decoration:underline}
@media(prefers-reduced-motion:reduce){.plans-page-grid .plan-card,.plans-page-grid .plan-buy{transition:none!important}}

.settings-sliders-icon{width:17px;height:17px;min-width:17px;min-height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}.settings-simple-icon{width:17px;height:17px;min-width:17px;min-height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;transition:transform .2s ease}
.nav-item[href="/settings.html"]:hover .settings-sliders-icon,.nav-item[href="/settings.html"]:hover .settings-simple-icon{transform:rotate(-8deg)}
@media(prefers-reduced-motion:reduce){.settings-sliders-icon{transition:none!important}}

/* 2026 chat visibility and theme consistency repair */
.conversation{position:relative;z-index:1;visibility:visible!important;opacity:1!important;min-height:0}
.conversation[hidden]{display:none!important}
.message{display:block!important;visibility:visible!important;opacity:1!important;animation:codz-message-in .22s ease-out both}
.message.user{border:1px solid var(--line);box-shadow:0 3px 14px #00000006}
.message.assistant .message-content{display:block;min-width:0;color:var(--text)}
.message-content p{margin:0 0 .8em}.message-content p:last-child{margin-bottom:0}
.message-content h1,.message-content h2,.message-content h3{line-height:1.3;letter-spacing:-.025em}
@keyframes codz-message-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
html[data-theme="dark"] body{background:var(--bg);color:var(--text)}
html[data-theme="light"] body{background:var(--bg);color:var(--text)}
@media(prefers-reduced-motion:reduce){.message{animation:none!important}}

/* Keep the saved appearance consistent on every page using the shared stylesheet. */
:root[data-theme="dark"] body{background:var(--bg)!important;color:var(--text)!important}
:root[data-theme="dark"] .settings,:root[data-theme="dark"] .page{background:transparent!important;color:var(--text)!important}
:root[data-theme="dark"] .panel,:root[data-theme="dark"] .admin-card,:root[data-theme="dark"] .provider-card{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
:root[data-theme="dark"] .settings input:not([type=checkbox]):not([type=radio]),:root[data-theme="dark"] .settings select,:root[data-theme="dark"] .settings textarea,:root[data-theme="dark"] .page input:not([type=checkbox]):not([type=radio]),:root[data-theme="dark"] .page select,:root[data-theme="dark"] .page textarea{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
:root[data-theme="light"] body{background:var(--bg);color:var(--text)}

/* Markdown horizontal separators: one restrained, theme-aware line instead of browser defaults. */
.message-content hr{display:block;border:0;border-top:1px solid var(--line);height:0;margin:1.15rem 0;opacity:.9}
.message-content blockquote{margin:.9rem 0;padding:.2rem 0 .2rem 1rem;border-left:3px solid color-mix(in srgb,var(--accent) 35%,var(--line));color:var(--muted)}
.message-content blockquote p{margin:0}

/* Chat rendering hardening: always preserve a visible transcript after send. */
.main:not(.empty-state)>.conversation{display:flex!important;visibility:visible!important;opacity:1!important;flex:1 1 0;min-height:0;position:relative;z-index:2}
.main:not(.empty-state)>.conversation[hidden]{display:flex!important}
#conversation>.message{display:block!important;visibility:visible!important;opacity:1!important;position:relative;flex:0 0 auto;max-width:100%;isolation:isolate}
#conversation>.message.user{align-self:flex-end;width:fit-content;max-width:min(80%,720px)}
#conversation>.message.assistant{align-self:stretch;width:100%}
#conversation .message-content{display:block!important;visibility:visible!important;overflow-wrap:anywhere;white-space:normal}
#conversation .message-content pre{max-width:100%;overflow:auto}
@media(max-width:760px){#conversation>.message.user{max-width:94%}}

/* Chat transcript hardening: keep both sides readable above the fixed composer. */
body:has(>.shell) .main:not(.empty-state) #conversation.conversation,
.main:not(.empty-state) #conversation.conversation{
  display:flex!important;flex-direction:column!important;visibility:visible!important;opacity:1!important;
  flex:1 1 0!important;height:0!important;min-height:0!important;max-height:none!important;
  position:relative!important;z-index:12!important;overflow-x:hidden!important;overflow-y:auto!important;
  color:var(--text)!important;isolation:isolate;
}
.main:not(.empty-state) #conversation.conversation[hidden]{display:flex!important}
#conversation>.message{visibility:visible!important;opacity:1!important;position:relative!important;z-index:1!important;color:var(--text)!important;min-height:fit-content}
#conversation>.message .role{display:block!important;visibility:visible!important;color:var(--muted)!important}
#conversation>.message .message-content{display:block!important;visibility:visible!important;opacity:1!important;color:var(--text)!important;overflow-wrap:anywhere;word-break:normal}
#conversation>.message.user{align-self:flex-end;flex:0 0 auto;width:fit-content;max-width:min(94%,760px);padding:13px 16px;border:1px solid var(--line)!important;border-radius:18px 18px 5px 18px;background:var(--surface)!important}
#conversation>.message.assistant{align-self:stretch;flex:0 0 auto;width:100%;padding:15px 2px;border:0!important;border-radius:0;background:transparent!important}
#conversation>.message.error .message-content{color:#dc5555!important}
.account-links a .fi-rr-settings{font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
@media(prefers-reduced-motion:reduce){#conversation>.message{animation:none!important}}

.quota-countdown-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:12px;color:var(--muted)}.quota-countdown-row strong{font:700 16px "JetBrains Mono",monospace;color:var(--text);font-variant-numeric:tabular-nums}.quota-countdown-row strong[data-state="waiting"]{color:#b76a2b}.quota-countdown-row strong[data-state="ready"]{color:var(--text)}.codz-settings-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.settings-sliders-icon{display:none!important}
.codz-menu button,.codz-menu a{display:flex;align-items:center;gap:11px;min-height:40px;padding:10px 12px}.codz-menu button .ui-icon,.codz-menu a .ui-icon,.codz-menu a .fi{display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;width:18px;height:18px;margin:0;font-size:16px}.codz-menu button span,.codz-menu a span{flex:1;min-width:0}.codz-menu button:hover .ui-icon,.codz-menu a:hover .ui-icon{transform:translateX(1px)}



/* Custom interaction layer: tactile controls, animated icons and responsive account metrics. */
:root{--control-radius:14px;--control-focus:color-mix(in srgb,var(--text) 24%,transparent)}
input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select{appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:var(--control-radius);background:var(--surface);color:var(--text);padding:12px 14px;min-height:44px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease;outline:none}
input:not([type=checkbox]):not([type=radio]):focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--text);box-shadow:0 0 0 4px var(--control-focus)}
textarea{resize:vertical;line-height:1.65}
select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236e6e80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
button,a,.icon-button,.nav-item{transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
.ui-icon,.fi,.codz-settings-icon,.codz-svg-icon,.theme-symbol{transform-origin:center;transition:transform .22s cubic-bezier(.2,.8,.2,1),color .18s ease}
button:hover .ui-icon,button:hover .fi,a:hover .ui-icon,a:hover .fi,.nav-item:hover .ui-icon,.profile:hover .ui-icon{animation:codz-icon-hover .46s ease both}
button:active .ui-icon,button:active .fi,.icon-button:active .ui-icon{animation:codz-icon-press .22s ease both}
@keyframes codz-icon-hover{0%{transform:translateY(0) scale(1) rotate(0)}45%{transform:translateY(-2px) scale(1.15) rotate(-7deg)}100%{transform:translateY(0) scale(1.03) rotate(0)}}
@keyframes codz-icon-press{0%{transform:scale(1)}55%{transform:scale(.78) rotate(5deg)}100%{transform:scale(.94)}}
.nav-item{position:relative;min-height:42px}.nav-coming-soon{margin-left:auto;padding:3px 7px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:9px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.account-popover{max-height:min(78dvh,680px);overflow:auto;overscroll-behavior:contain;width:min(360px,calc(100vw - 24px));padding:20px;border-radius:22px;box-shadow:0 24px 80px #0002}
.account-heading{gap:14px}.account-heading>div{min-width:0}.account-heading strong{display:block;overflow-wrap:anywhere;font-size:16px;letter-spacing:-.02em}.account-heading p{margin:5px 0 0;color:var(--muted);font-size:12px}
.account-token-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 8px}.account-token-line span{font-size:12px;color:var(--muted)}.account-token-line strong{font-size:13px;font-variant-numeric:tabular-nums}
.matrix-track{height:9px;overflow:hidden;border-radius:999px;background:var(--line);box-shadow:inset 0 1px 2px #00000010}.matrix-track span{height:100%;display:block;border-radius:inherit;background:var(--text);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.account-token-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 18px}.account-token-stats>div{display:flex;flex-direction:column;gap:7px;min-width:0;padding:11px 10px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}.account-token-stats span{font-size:10px;color:var(--muted)}.account-token-stats strong{font-size:clamp(12px,3.5vw,15px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.account-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.account-links a{justify-content:center;gap:6px;padding:10px 6px;border:1px solid var(--line);border-radius:12px;font-size:11px;white-space:nowrap}.account-links a:hover{background:var(--surface);transform:translateY(-1px)}
#account-logout{margin-top:12px;width:100%;min-height:42px;border-radius:12px;border:1px solid var(--line);background:transparent}
#conversation.conversation{display:flex;flex-direction:column;flex:1 1 auto!important;height:auto!important;min-height:0;overflow-y:auto;overflow-x:hidden;isolation:isolate}.main:not(.empty-state) #conversation.conversation{display:flex!important;flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;position:relative!important;z-index:12!important;visibility:visible!important;opacity:1!important}.main:not(.empty-state) #conversation>.message{flex:0 0 auto!important;display:block!important;position:relative!important;visibility:visible!important;opacity:1!important;z-index:1!important}.main:not(.empty-state) #conversation>.message.user{align-self:flex-end;max-width:min(94%,760px)}.main:not(.empty-state) #conversation>.message.assistant{align-self:stretch;width:100%}.main:not(.empty-state) .composer{position:relative;z-index:14;flex:0 0 auto}.main:not(.empty-state) .welcome{display:none!important}
@media(max-width:420px){.account-popover{right:10px!important;padding:15px}.account-token-stats{gap:5px}.account-token-stats>div{padding:9px 7px}.account-links a{font-size:10px;gap:4px}}
@media(prefers-reduced-motion:reduce){button:hover .ui-icon,button:hover .fi,a:hover .ui-icon,a:hover .fi,.nav-item:hover .ui-icon,.profile:hover .ui-icon,button:active .ui-icon,button:active .fi{animation:none!important}}

/* Keep all message nodes in the visible transcript layer after the first send. */
.main:not(.empty-state) #conversation{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;height:auto!important;min-height:0!important;overflow-y:auto!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:12!important}.main:not(.empty-state) #chat-form{position:relative!important;z-index:14!important}.main:not(.empty-state) #welcome[hidden]{display:none!important}

/* Consistent animated Settings glyph, inspired by the requested Flaticon gear. */
.settings-gear-svg{width:18px;height:18px;display:inline-block;flex:none;fill:currentColor;stroke:currentColor;stroke-width:.35;vertical-align:middle;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
a:hover .settings-gear-svg,button:hover .settings-gear-svg,.settings-gear-svg:hover{transform:rotate(42deg)}
/* Account panel: adaptive, pointer-reactive, and theme-aware. */
.account-popover{width:min(360px,calc(100vw - 24px));max-height:min(76vh,680px);overflow:auto;transform-origin:bottom left;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;box-shadow:0 22px 70px #0003}
.account-popover:not([hidden]){animation:account-panel-in .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes account-panel-in{from{opacity:0;transform:translateY(10px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
.account-popover .account-token-stats>div{min-width:0;padding:10px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.account-popover .account-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 0}
.account-popover .account-links a{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;min-height:42px;border:1px solid var(--line);overflow-wrap:anywhere}
.account-popover .account-heading{display:flex;align-items:center;gap:12px;padding:4px 26px 14px 0;border-bottom:1px solid var(--line)}
.account-popover .account-heading>div{min-width:0}.account-popover .account-heading strong{font-size:16px;line-height:1.3}
.account-popover .matrix-track{height:9px;overflow:hidden;border-radius:99px;background:var(--surface);border:1px solid var(--line)}
.account-popover #account-token-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7c9b84,#c3d5b5);transition:width .55s cubic-bezier(.2,.8,.2,1)}
.account-popover #account-logout{border:1px solid var(--line);margin-top:8px;text-align:center}
.account-popover a:focus-visible,.account-popover button:focus-visible,.model-picker-toggle:focus-visible,.model-picker-menu button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
/* Custom model selector beside the send action; files are pushed to the right. */
.composer-tools{display:flex;align-items:center;gap:8px}
.attach-button{order:3;margin-left:auto}
#file-picker{order:4}
.model-picker-toggle{order:2;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--text);font:600 12px/1.2 Inter,system-ui,sans-serif;cursor:pointer;transition:transform .18s,border-color .18s,background .18s}
.model-picker-toggle:hover{transform:translateY(-2px);border-color:var(--muted)}
.model-picker-sheep{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--bg);font-size:16px;transition:transform .25s}
.model-picker-toggle:hover .model-picker-sheep{transform:rotate(-10deg) scale(1.13)}
.model-picker-toggle .fi{font-size:10px;transition:transform .2s}
.model-picker-toggle[aria-expanded=true] .fi{transform:rotate(180deg)}
.send-button{order:5;flex:none}
.model-picker-menu{position:absolute;z-index:55;bottom:calc(100% + 10px);left:0;width:min(340px,calc(100vw - 40px));padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--bg);color:var(--text);box-shadow:0 20px 60px #0003;animation:account-panel-in .18s ease both}
.model-picker-menu[hidden]{display:none}
.model-picker-heading{display:flex;flex-direction:column;gap:2px;padding:6px 8px 10px}.model-picker-heading strong{font-size:14px}.model-picker-heading span{font-size:11px;color:var(--muted)}
.model-picker-options{display:grid;gap:5px;max-height:300px;overflow:auto}
.model-option{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text);text-align:left;cursor:pointer}
.model-option:hover,.model-option.selected{border-color:var(--line);background:var(--surface)}
.model-option-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--surface);font-size:17px}
.model-option>span:nth-child(2){display:grid;gap:3px;min-width:0;flex:1}.model-option strong{font-size:12px}.model-option small{font-size:10px;color:var(--muted)}
.model-option-tier{font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.model-picker-upgrade{display:flex;justify-content:space-between;align-items:center;padding:10px 8px 3px;margin-top:6px;border-top:1px solid var(--line);font-size:11px;color:var(--text)}
/* Custom pointer hint, not the browser's default tooltip. */
.codz-hover-hint{position:fixed;z-index:9999;pointer-events:none;max-width:220px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--text);color:var(--bg);font:600 11px/1.35 Inter,system-ui,sans-serif;letter-spacing:.01em;box-shadow:0 8px 28px #0002;opacity:0;transform:translateY(4px) scale(.98);transition:opacity .12s ease,transform .12s ease}
.codz-hover-hint.visible{opacity:1;transform:translateY(0) scale(1)}
/* Keep standalone settings and legal pages in the user's chosen theme. */
html[data-theme=dark] body,html[data-theme=dark] .page,html[data-theme=dark] .settings{background:var(--bg);color:var(--text)}
html[data-theme=dark] .panel,html[data-theme=dark] .settings .panel,html[data-theme=dark] .page .panel{background:var(--surface);color:var(--text);border-color:var(--line)}
html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea{background:var(--surface);color:var(--text);border-color:var(--line)}
html[data-theme=light] body,html[data-theme=light] .page,html[data-theme=light] .settings{background:var(--bg);color:var(--text)}
html[data-theme=light] .panel{background:var(--bg);color:var(--text);border-color:var(--line)}
.page,.settings{overflow-wrap:anywhere;text-wrap:pretty}
.page h1,.settings h1,.page h2,.settings h2{max-width:100%;text-wrap:balance}
.page p,.page li,.settings p,.settings label{line-height:1.8}
@media(max-width:600px){.account-popover{left:12px!important;right:12px!important;bottom:12px!important;width:auto;max-height:80dvh}.account-popover .account-links{grid-template-columns:1fr}.model-picker-menu{left:0;right:0;width:min(330px,calc(100vw - 32px))}.model-picker-toggle{padding:0 9px}}

.settings-gear-image{width:18px;height:18px;object-fit:contain;display:inline-block;flex:none;vertical-align:middle;transition:transform .35s cubic-bezier(.2,.8,.2,1);filter:var(--settings-icon-filter,none)}html[data-theme="dark"] .settings-gear-image{filter:invert(1)}a:hover .settings-gear-image,button:hover .settings-gear-image{transform:rotate(42deg)}

/* Refined type hierarchy */
h1,h2,h3,.welcome h1,.page h1,.settings h1{font-family:"Outfit","Space Grotesk","DM Sans",Inter,system-ui,sans-serif;letter-spacing:-.035em;text-wrap:balance}.welcome-copy,.page p,.settings p{font-family:"DM Sans",Inter,system-ui,sans-serif;line-height:1.85}code,pre,.model-option-tier,.plan-label{font-family:"JetBrains Mono",ui-monospace,monospace}

/* High-contrast chat transcript safety net: never hide a sent prompt or reply. */
#conversation:not(:empty),#conversation[hidden]:not(:empty){display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:160px!important;max-height:calc(100dvh - 220px)!important;overflow-y:auto!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:30!important}
#conversation:not(:empty)>.message{display:block!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:2!important;flex:0 0 auto!important;color:var(--text)!important}
#conversation:not(:empty)>.message .message-content{display:block!important;visibility:visible!important;opacity:1!important;color:var(--text)!important;overflow-wrap:anywhere!important}
.main:has(#conversation>.message){display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
.codz-hover-hint{position:fixed;z-index:99999;pointer-events:none;max-width:210px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:600 11px/1.35 Inter,system-ui,sans-serif;box-shadow:0 8px 26px #0003;opacity:0;transform:translateY(4px) scale(.97);transition:opacity .12s ease,transform .12s ease}
.codz-hover-hint.visible{opacity:1;transform:translateY(0) scale(1)}
/* Every interactive icon has a small, consistent motion cue. */
button .ui-icon,button .fi,a .ui-icon,a .fi,.nav-item .ui-icon,.icon-button svg,.icon-button img{transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease}
button:hover .ui-icon,button:hover .fi,a:hover .ui-icon,a:hover .fi,.nav-item:hover .ui-icon,.icon-button:hover svg,.icon-button:hover img{transform:translateY(-1px) scale(1.08)}
button:active .ui-icon,button:active .fi,a:active .ui-icon,a:active .fi,.icon-button:active svg{transform:scale(.91)}
@media(prefers-reduced-motion:reduce){.codz-hover-hint,button .ui-icon,button .fi,a .ui-icon,a .fi,.icon-button svg,.icon-button img{transition:none!important}}


/* Codz motion system: consistent, lightweight feedback for every icon. */
@keyframes codz-icon-arrive{from{opacity:.35;transform:translateY(2px) scale(.82) rotate(-8deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
:where(i.fi,.ui-icon,.codz-svg-icon,.settings-gear-image,.model-picker-sheep){transform-origin:center;transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease;animation:codz-icon-arrive .38s cubic-bezier(.2,.8,.2,1) both}
:where(button,a,[role=button],.icon-button):hover :where(i.fi,svg,img,.ui-icon,.codz-svg-icon,.settings-gear-image,.model-picker-sheep){transform:translateY(-1px) rotate(-4deg) scale(1.07);filter:drop-shadow(0 2px 3px rgb(0 0 0 / .12))}
:where(button,a,[role=button],.icon-button):active :where(i.fi,svg,img,.ui-icon,.codz-svg-icon,.settings-gear-image,.model-picker-sheep){transform:scale(.88) rotate(4deg)}
:where(button,a,[role=button],.icon-button):focus-visible :where(i.fi,svg,.ui-icon,.codz-svg-icon,.settings-gear-image,.model-picker-sheep){transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){:where(i.fi,.ui-icon,.codz-svg-icon,.settings-gear-image,.model-picker-sheep){animation:none!important;transition:none!important}:where(button,a,[role=button],.icon-button):hover :where(i.fi,svg,img,.ui-icon,.codz-svg-icon,.settings-gear-image,.model-picker-sheep),:where(button,a,[role=button],.icon-button):active :where(i.fi,svg,img,.ui-icon,.codz-svg-icon,.settings-gear-image,.model-picker-sheep){transform:none!important}}

/* Final transcript layout guard for browsers with stale flex sizing. */
.main:not(.empty-state){height:100dvh!important;min-height:0!important}
#conversation:not(:empty){height:calc(100dvh - 220px)!important;min-height:160px!important;flex:1 1 auto!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior:contain}
#conversation:not(:empty)>.message,#conversation:not(:empty)>.message .message-content{display:block!important;visibility:visible!important;opacity:1!important}


/* Shared icon motion and Flaticon settings glyph across themes. */
.settings-gear-image,.codz-settings-icon{display:inline-block;width:18px;height:18px;object-fit:contain;flex:0 0 18px;transform-origin:center;transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease;filter:none!important}
html[data-theme="dark"] .settings-gear-image,html[data-theme="dark"] .codz-settings-icon{filter:invert(1)!important}
:where(button,a,[role=button],.icon-button):hover :where(i.fi,svg,img,.ui-icon,.codz-svg-icon,.codz-settings-icon,.settings-gear-image,.model-picker-sheep){transform:translateY(-1px) rotate(-4deg) scale(1.07);filter:drop-shadow(0 2px 3px rgb(0 0 0 / .12))}
html[data-theme="dark"] :where(button,a,[role=button],.icon-button):hover :where(.settings-gear-image,.codz-settings-icon){filter:invert(1) drop-shadow(0 2px 3px rgb(0 0 0 / .12))}
:where(button,a,[role=button],.icon-button):active :where(i.fi,svg,img,.ui-icon,.codz-svg-icon,.codz-settings-icon,.settings-gear-image,.model-picker-sheep){transform:scale(.9) rotate(3deg)}
.attach-button .ui-icon{animation:codz-icon-arrive .38s cubic-bezier(.2,.8,.2,1) both}
.composer-input{position:relative}
.composer-input .composer-tools{display:contents}
.composer-input>.attach-button{order:0}
.composer-input>#message{order:1}
.composer-input>.composer-tools>.model-picker-toggle{order:2;flex:0 0 auto}
.composer-input>.composer-tools>.send-button{order:3;flex:0 0 36px}
.model-picker-menu{left:auto!important;right:44px!important;bottom:calc(100% + 10px)!important;z-index:80}
.model-provider-logo{display:block;width:20px;height:20px;object-fit:contain}
.model-option-icon{background:var(--surface);border:1px solid var(--line)}
.model-speed-label{font-size:10px!important;font-weight:800;letter-spacing:.08em}
.model-speed-label.fast{color:#16834a!important}
.model-speed-label.worker{color:#9a6b22!important}
.composer-footer{justify-content:center!important;margin:3px auto 0!important}
.composer-footer .fineprint{width:100%;max-width:none;margin:0!important;font-size:11px!important;line-height:1.4}
@media(max-width:600px){.model-picker-menu{left:auto!important;right:44px!important;width:min(330px,calc(100vw - 24px))!important}.composer-input{gap:5px}.model-picker-toggle{gap:5px;max-width:112px}.model-picker-toggle #model-picker-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.settings-gear-image,.codz-settings-icon,:where(button,a,[role=button],.icon-button):hover :where(i.fi,svg,img,.ui-icon,.codz-svg-icon,.codz-settings-icon,.settings-gear-image,.model-picker-sheep),:where(button,a,[role=button],.icon-button):active :where(i.fi,svg,img,.ui-icon,.codz-svg-icon,.codz-settings-icon,.settings-gear-image,.model-picker-sheep){animation:none!important;transition:none!important;transform:none!important}}

@keyframes codz-icon-hover{0%{transform:translateY(0) scale(1)}55%{transform:translateY(-2px) rotate(-5deg) scale(1.12)}100%{transform:translateY(-1px) rotate(-4deg) scale(1.07)}}
:where(button,a,[role=button],.icon-button):hover :where(i.fi,svg,img,.ui-icon,.codz-svg-icon,.codz-settings-icon,.settings-gear-image,.model-picker-sheep){animation:codz-icon-hover .22s ease both!important}
#menu-toggle:hover .ui-icon{animation:codz-icon-hover .22s ease both!important}
@media(prefers-reduced-motion:reduce){:where(button,a,[role=button],.icon-button):hover :where(i.fi,svg,img,.ui-icon,.codz-svg-icon,.codz-settings-icon,.settings-gear-image,.model-picker-sheep),#menu-toggle:hover .ui-icon{animation:none!important}}

/* Profile and mobile chat fixes — 2026-10-22 */
.profile-avatar-wrap img,.account-avatar img,.profile-edit-avatar img,.avatar-preview img{object-position:50% 32%!important}
@media(max-width:760px){
 .sidebar{z-index:100!important}
 .sidebar.open{box-shadow:18px 0 48px rgba(0,0,0,.32)}
 .main{position:relative;z-index:1;min-width:0}
 .composer{position:relative;z-index:2;flex-shrink:0;padding-bottom:max(12px,env(safe-area-inset-bottom))}
 .composer-input{gap:6px;padding:7px 8px 7px 10px;min-width:0}
 .composer textarea{min-width:0;font-size:16px}
 .composer-tools{flex:0 0 auto;gap:5px}
 .model-picker-toggle{max-width:112px;min-width:0;padding:7px 8px;font-size:11px;gap:4px}
 .model-picker-toggle #model-picker-label{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .send-button{flex:0 0 34px;width:34px;height:34px}
 .conversation{position:relative;z-index:2;min-width:0;padding-left:10px;padding-right:10px}
 .message.user{max-width:94%}
 .fineprint{margin-bottom:4px;padding:0 8px;line-height:1.4}
}

/* Responsive repair pass: circular avatars, drawer layering, quota clarity and model state */
.profile-avatar-wrap,.profile-edit-avatar{position:relative;isolation:isolate;overflow:hidden;border-radius:50%;clip-path:circle(50% at 50% 50%);aspect-ratio:1/1}
.profile-avatar-wrap img,.profile-edit-avatar img,.account-avatar img,#profile-avatar{position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;min-width:100%;min-height:100%;max-width:none;max-height:none;object-fit:cover!important;object-position:50% 50%!important;border-radius:50%;clip-path:circle(50% at 50% 50%);transform:translateZ(0)}
.profile-avatar-wrap img[hidden],.profile-edit-avatar img[hidden],.account-avatar img[hidden],#profile-avatar[hidden]{display:none!important}
.profile-edit-avatar .fi,.profile-avatar-wrap>i{position:relative;z-index:1}
.account-popover{z-index:450!important}
body.sidebar-open .main{pointer-events:none!important}
body.sidebar-open .sidebar{pointer-events:auto!important}
@media(max-width:760px){
 .sidebar{z-index:300!important;width:min(320px,88vw,100%);max-width:100vw;overscroll-behavior:contain}
 .sidebar.open{transform:translateX(0);pointer-events:auto}
 .main{z-index:1!important;isolation:isolate;min-width:0;max-width:100vw}
 .topbar,.conversation,.composer,.composer-footer{z-index:auto!important}
 .composer{position:relative;z-index:2!important;width:100%;max-width:100%;min-width:0;padding:7px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));margin:0}
 .composer-input{width:100%;max-width:100%;min-width:0;gap:5px;padding:6px 7px 6px 10px;border-radius:20px}
 .composer textarea{min-width:0;width:100%;font-size:16px;max-height:28dvh;min-height:38px;padding:6px 0;line-height:1.4}
 .composer-tools{gap:4px;flex:0 0 auto}
 .attach-button{width:30px;height:30px;min-width:30px}
 .model-picker-toggle{max-width:min(38vw,140px);min-width:0;gap:5px;padding:0 7px;min-height:32px;font-size:11px}
 .model-picker-toggle #model-picker-label{max-width:clamp(42px,15vw,76px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .model-picker-sheep{width:22px;height:22px;flex:0 0 22px}
 .send-button{width:32px;height:32px;min-width:32px;flex:0 0 32px}
 .conversation{min-width:0;width:100%;max-width:100%;overflow-x:hidden;padding-left:clamp(8px,3vw,16px);padding-right:clamp(8px,3vw,16px)}
 .message.user{max-width:94%;overflow-wrap:anywhere}
 .account-popover{z-index:450!important;max-height:min(78dvh,640px);overflow:auto}
 .credits-popover{z-index:440!important;max-height:min(70dvh,560px);overflow:auto}
 .topbar{min-width:0;gap:6px;padding:7px 8px}
 .top-actions{min-width:0;gap:3px}
 .top-actions .icon-button{width:32px;height:32px;flex:0 0 32px}
 .credit-pill{min-width:0;padding:5px 7px;gap:4px}
 .mobile-brand{font-size:16px}
 .fineprint{font-size:10px;line-height:1.35}
}
@media(max-width:420px){
 .topbar{padding:6px 6px;gap:4px}
 .top-actions{gap:2px}
 .top-actions .icon-button{width:29px;height:29px;flex-basis:29px}
 .discord-top{display:none!important}
 .credit-pill span{display:none}
 .composer-input{gap:3px;padding-left:7px;padding-right:5px}
 .attach-button{width:27px;height:27px;min-width:27px}
 .model-picker-toggle{max-width:35vw;padding:0 5px;font-size:10px;gap:3px}
 .model-picker-toggle #model-picker-label{max-width:12vw}
 .model-picker-toggle .fi{display:none}
 .send-button{width:30px;height:30px;min-width:30px;flex-basis:30px}
 .account-token-stats{gap:5px}
 .account-token-stats>div{padding:8px 6px}
 .account-links a{font-size:10px;padding:8px 3px}
}
@media(max-width:340px){
 .top-actions #redeem-open,.top-actions #more-toggle{display:none!important}
 .model-picker-toggle{max-width:31vw}
 .composer-tools{gap:2px}
 .account-links{grid-template-columns:1fr}
 .account-links a{justify-content:flex-start}
}
@media(min-width:761px){.sidebar{z-index:30}.account-popover{z-index:450}}
.model-picker-toggle #model-picker-current-icon{position:relative;flex:0 0 26px;width:26px;height:26px;box-sizing:border-box;border:1px solid var(--model-ring,#b8bbc4);box-shadow:0 0 0 2px color-mix(in srgb,var(--model-ring,#b8bbc4) 22%,transparent);transition:border-color .2s,box-shadow .2s,transform .2s}
.model-picker-toggle #model-picker-current-icon.fast{--model-ring:#22c55e}
.model-picker-toggle #model-picker-current-icon.worker{--model-ring:#f97316}
.model-picker-toggle #model-picker-current-icon.plus{--model-ring:#8b5cf6}
.model-picker-toggle #model-picker-current-icon.max{--model-ring:#eab308}
.model-picker-toggle #model-picker-current-icon.model-changed{animation:model-ring-pop .42s cubic-bezier(.2,.8,.2,1)}
.model-picker-toggle #model-picker-current-icon img{width:17px;height:17px;object-fit:contain}
.model-option.selected{border-color:var(--model-option-ring,#8b5cf6)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--model-option-ring,#8b5cf6) 22%,transparent),0 8px 24px #0000000d}
.model-option.selected .model-option-icon{border:1px solid var(--model-option-ring,#8b5cf6);box-shadow:0 0 0 2px color-mix(in srgb,var(--model-option-ring,#8b5cf6) 20%,transparent)}
@keyframes model-ring-pop{0%{transform:scale(.86) rotate(-10deg)}65%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){.model-picker-toggle #model-picker-current-icon.model-changed{animation:none}}
.quota-panel{width:min(340px,calc(100vw - 24px));padding:17px}
.quota-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
.quota-panel-heading strong{display:block;margin:2px 0 0;font-size:16px;letter-spacing:-.02em}
.quota-eyebrow{font-size:9px;letter-spacing:.14em;font-weight:800;color:var(--muted)}
.quota-plan-chip{padding:5px 9px;border:1px solid var(--line);border-radius:99px;background:var(--surface);font-size:10px;font-weight:750;text-transform:uppercase}
.quota-primary{display:flex;flex-direction:column;gap:3px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.quota-primary>span,.quota-primary>small{font-size:11px;color:var(--muted)}
.quota-primary>strong{font-size:clamp(28px,8vw,36px);line-height:1.1;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.quota-panel .quota-track{height:9px;margin:10px 0 13px;background:var(--line)}
.quota-number-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px}
.quota-number-grid>div{min-width:0;display:flex;flex-direction:column;gap:5px;padding:10px 11px;border:1px solid var(--line);border-radius:12px}
.quota-number-grid span{font-size:10px;color:var(--muted)}
.quota-number-grid strong{font-size:clamp(14px,4vw,18px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.quota-panel .quota-countdown-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:11px;border-top:1px solid var(--line)}
.quota-panel .quota-countdown-row span{font-size:11px;color:var(--muted)}
.quota-panel .quota-countdown-row strong{font-size:12px;font-variant-numeric:tabular-nums}
.quota-panel #credits-reset{font-size:11px;line-height:1.45;margin:7px 0 12px}
.quota-panel .quota-plan-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:11px;text-decoration:none;background:var(--surface)}
.quota-panel .quota-plan-link:hover{transform:translateY(-1px);border-color:var(--muted)}
@media(max-width:420px){.quota-panel{right:8px;width:calc(100vw - 16px);padding:13px}.quota-primary{padding:12px}.quota-primary>strong{font-size:30px}}

/* Model selector: only the selected model mark remains visible; FAST/WORKER hover outline. */
.model-picker-toggle{position:relative;justify-content:center;gap:0;min-width:42px;width:44px;padding:5px;border:1px solid var(--line);border-radius:13px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease}
.model-picker-toggle #model-picker-label,.model-picker-toggle>i{display:none!important}
.model-picker-toggle #model-picker-current-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;min-width:30px;border:0!important;outline:0!important;border-radius:9px;box-shadow:none!important;background:transparent;overflow:visible;color:var(--ai-brand-color,#8b5cf6);transition:transform .2s ease,color .2s ease}
.model-picker-toggle #model-picker-current-icon img{display:block;width:23px;height:23px;max-width:23px;max-height:23px;object-fit:contain;filter:none}
.model-picker-toggle #model-picker-current-icon .model-code-glyph{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:850;letter-spacing:-.1em;color:#f97316;transform:translateX(-1px)}
.model-picker-toggle #model-picker-current-icon.model-icon-fallback{font-size:21px;color:var(--ai-brand-color,#8b5cf6)}
.model-picker-toggle.fast:hover,.model-picker-toggle.fast:focus-visible{border-color:#22c55e!important;box-shadow:0 0 0 2px #22c55e55,0 0 18px #22c55e22!important;transform:translateY(-1px)}
.model-picker-toggle.worker:hover,.model-picker-toggle.worker:focus-visible{border-color:#f97316!important;box-shadow:0 0 0 2px #f9731655,0 0 18px #f9731622!important;transform:translateY(-1px)}
.model-picker-toggle.fast{--model-hover-color:#22c55e}.model-picker-toggle.worker{--model-hover-color:#f97316}
.model-picker-toggle:active{transform:scale(.96)}
.model-picker-toggle #model-picker-current-icon.model-changed{animation:model-ring-pop .4s cubic-bezier(.2,.8,.2,1)}
.model-option-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--ai-brand-color,#8b5cf6) 9%,transparent);color:var(--ai-brand-color,#8b5cf6)}
.model-option-icon img{width:24px;height:24px;object-fit:contain}
.model-option-icon .model-code-glyph{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:18px;font-weight:850;letter-spacing:-.12em;color:#f97316;transform:translateX(-1px)}
.model-option-icon.model-icon-fallback{font-size:21px}
.model-option.selected{border-color:var(--model-option-ring,#8b5cf6)!important;box-shadow:0 0 0 1px var(--model-option-ring,#8b5cf6),0 8px 24px #0000000d!important}
.model-option.selected .model-option-icon{outline:2px solid var(--model-tier-ring,#b8bbc4);outline-offset:2px}
.model-option.fast:hover,.model-option.fast:focus-visible{border-color:#22c55e!important;box-shadow:0 0 0 2px #22c55e44!important}
.model-option.worker:hover,.model-option.worker:focus-visible{border-color:#f97316!important;box-shadow:0 0 0 2px #f9731644!important}
@media(max-width:760px){.model-picker-toggle{width:40px;min-width:40px;max-width:40px;padding:4px}.model-picker-toggle #model-picker-current-icon{width:28px;height:28px;flex-basis:28px}.model-picker-toggle #model-picker-current-icon img{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.model-picker-toggle,.model-picker-toggle #model-picker-current-icon{transition:none!important;animation:none!important}}

.model-picker-toggle .model-picker-sheep{transform:none!important;animation:none!important;filter:none!important;background:transparent!important}
.model-picker-toggle #model-picker-current-icon .model-provider-logo{transform:none!important;filter:none!important}
.model-picker-toggle:hover #model-picker-current-icon{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.model-picker-toggle .model-picker-sheep{transform:none!important}}

/* Codz brand mark contrast in light mode */
[data-theme="light"] .model-picker-toggle #model-picker-current-icon img.codz-model-logo,
[data-theme="light"] .model-option-icon img.codz-model-logo{filter:invert(1)}

/* Free Token navigation and shared Flaticon token mark */
.token-icon:not(svg){filter:none}:root[data-theme="dark"] .token-icon:not(svg){filter:invert(1)}.free-token-nav{font:inherit;text-align:left;border:0;cursor:pointer;background:transparent;width:100%;}
.free-token-nav:focus-visible{outline:2px solid var(--accent,#8b5cf6);outline-offset:2px;}
.token-icon{display:inline-block;width:18px;height:18px;min-width:18px;flex:0 0 18px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.credit-pill .token-icon{width:17px;height:17px;min-width:17px;flex-basis:17px;}
.plan-quota .token-icon{width:18px;height:18px;min-width:18px;flex-basis:18px;margin-right:4px;}
.account-links .codz-svg-icon{width:15px;height:15px;flex:0 0 15px;}
@media(max-width:760px){.free-token-nav{min-height:42px;}}


/* Composer: keep the message field above the action row and avoid layout jumps. */
.composer-input{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px 14px 10px;border-radius:22px}
.composer textarea{order:0;flex:0 0 auto;min-height:58px;max-height:200px;width:100%;padding:7px 2px}
.composer-tools{order:1;width:100%;display:flex;align-items:center;gap:8px;padding:0}
.attach-button{order:0;margin:0;flex:0 0 34px}
.model-picker-toggle{order:1;margin-left:auto;min-width:0;max-width:calc(100% - 88px);padding:0 10px}
.model-picker-toggle #model-picker-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.send-button{order:2;flex:0 0 36px;transition:transform .16s ease,filter .16s ease,opacity .16s ease}
.send-button:hover{transform:translateY(-1px) scale(1.04);filter:brightness(1.05)}
.send-button:active{transform:scale(.94)}
.model-picker-menu{max-width:min(390px,calc(100vw - 28px));max-height:min(70vh,520px);overflow:auto}
.model-option{align-items:center;gap:11px;transition:background .16s ease,transform .16s ease,border-color .16s ease}
.model-option:hover{transform:translateX(2px)}
.model-option-copy{display:grid;gap:4px;min-width:0;flex:1;text-align:left}
.model-option-copy strong{font-size:13px}
.model-option-copy small{color:var(--muted);font-size:11px;line-height:1.4;white-space:normal}
.model-effort-panel{margin:10px 0 6px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.model-effort-panel[hidden]{display:none}
.model-effort-panel>strong{font-size:13px}
.model-effort-panel>p{margin:5px 0 10px;color:var(--muted);font-size:11px;line-height:1.45}
.model-effort-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.model-effort-options button{display:grid;gap:5px;min-width:0;padding:10px 5px;border:1px solid var(--line);border-radius:11px;background:var(--bg);text-align:center;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.model-effort-options button:hover{transform:translateY(-2px);border-color:var(--muted)}
.model-effort-options button.selected{border-color:var(--accent);background:var(--surface)}
.model-effort-options button strong{font-size:10px;letter-spacing:.06em}
.model-effort-options button small{color:var(--muted);font-size:10px}
.token-coin-icon{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cookie-menu-icon{width:17px;height:17px;vertical-align:middle;margin-right:3px}
@media(max-width:520px){.composer{padding-left:10px;padding-right:10px}.composer-input{padding:10px 11px}.model-picker-menu{left:0;right:0;width:auto}.model-picker-heading strong{font-size:13px}}

/* CODZ UI polish 2026-10-23 */
.brand-letters{display:inline-flex;align-items:center;gap:0.015em;letter-spacing:-.055em}
.brand-letters span{display:inline-block;transform-origin:50% 75%;animation:codz-letter-wave 3.6s ease-in-out infinite}
.brand-letters span:nth-child(2){animation-delay:.12s}.brand-letters span:nth-child(3){animation-delay:.24s}.brand-letters span:nth-child(4){animation-delay:.36s}
.brand:hover .brand-letters span{animation-duration:.55s}
@keyframes codz-letter-wave{0%,78%,100%{transform:translateY(0) rotate(0);opacity:1}84%{transform:translateY(-2px) rotate(-3deg)}90%{transform:translateY(1px) rotate(2deg)}}
.token-coin-icon{width:19px!important;height:19px!important;stroke-width:1.65!important;transition:transform .2s ease}
.free-token-nav:hover .token-coin-icon,.credits-pill:hover .token-coin-icon{transform:rotate(-12deg) scale(1.08)}
.cookie-menu-icon{width:18px!important;height:18px!important;stroke-width:1.8!important;fill:none!important}
.nav-item[href="/settings.html"] .settings-simple-icon{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.brand-letters span{animation:none!important;transition:none!important}}

/* ChatGPT-inspired Codz composer: prompt above, controls below */
.composer-input{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:13px 14px 10px;border-radius:24px;background:var(--bg);border:1px solid var(--line);box-shadow:0 4px 20px #00000008}
.composer-input:focus-within{border-color:color-mix(in srgb,var(--text) 28%,var(--line));box-shadow:0 5px 24px #0000000b}
.composer-input textarea{display:block;width:100%;min-height:42px;max-height:220px;resize:none;border:0;outline:0!important;background:transparent;padding:3px 2px 8px;line-height:1.55}
.composer-tools{display:flex;align-items:center;gap:8px;width:100%;min-height:38px}
.composer-tools .model-picker-toggle{margin-right:auto}
.composer-tools .send-button{margin-left:auto}
.composer{padding-top:12px;padding-bottom:max(14px,env(safe-area-inset-bottom))}
.model-picker-menu{z-index:30}
@media(max-width:520px){.composer-input{padding:11px 12px 9px;border-radius:21px}.composer-tools{gap:6px}.composer-tools .model-picker-toggle{max-width:calc(100% - 100px)}}

/* CODZ composer redesign: stacked input and accessible action rail */
#chat-form.composer{left:260px;right:0;padding:12px 24px max(14px,env(safe-area-inset-bottom))!important;background:linear-gradient(180deg,transparent 0%,var(--bg) 24%);}
#chat-form .composer-input{display:flex;flex-direction:column;align-items:stretch;gap:8px;max-width:820px;padding:13px 14px 10px 18px;border:1px solid var(--line);border-radius:25px;background:var(--bg);box-shadow:0 8px 30px #0000000b;transition:border-color .18s,box-shadow .18s;}
#chat-form .composer-input:focus-within{border-color:color-mix(in srgb,var(--text) 28%,var(--line));box-shadow:0 8px 32px #00000010}
#chat-form #message{width:100%;min-height:30px;max-height:190px;padding:2px 0 4px;line-height:1.55;font-size:15px;}
#chat-form .composer-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px}
#chat-form .composer-tools{display:flex;align-items:center;gap:7px;padding:0;min-width:0;flex-wrap:wrap}
#chat-form .attach-button,#chat-form .model-picker-toggle{flex:0 0 auto}
#chat-form .model-picker-toggle{max-width:min(260px,42vw)}
#chat-form .send-button{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;transition:transform .15s,opacity .15s}
#chat-form .send-button:hover{transform:scale(1.04)}#chat-form .send-button:active{transform:scale(.96)}#chat-form .send-button:disabled{opacity:.45;cursor:not-allowed;transform:none}
#chat-form .composer-footer{max-width:820px}.brand .brand-logo{width:30px;height:30px;flex:0 0 30px;stroke:currentColor}.brand .codz-chevron-logo{filter:drop-shadow(0 0 0 transparent);transition:filter .2s,transform .2s}.brand:hover .codz-chevron-logo{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--text) 35%,transparent));transform:translateY(-1px)}
.settings-simple-icon{width:18px!important;height:18px!important;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.thinking-indicator{display:inline-flex;align-items:center;gap:4px;margin:0 8px 0 0;vertical-align:middle;height:18px}.thinking-indicator span{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;animation:codz-thinking-pulse 1.1s ease-in-out infinite}.thinking-indicator span:nth-child(2){animation-delay:.15s}.thinking-indicator span:nth-child(3){animation-delay:.3s}.thinking-label{color:var(--muted);font-size:13px}@keyframes codz-thinking-pulse{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-4px);opacity:1}}
@media(max-width:760px){#chat-form.composer{left:0;right:0;padding:10px 12px max(12px,env(safe-area-inset-bottom))!important}#chat-form .composer-input{padding:11px 12px 9px;border-radius:22px}#chat-form .composer-controls{gap:8px}#chat-form .composer-tools{gap:5px}#chat-form .model-picker-toggle{max-width:150px}#conversation.conversation{padding-bottom:180px!important}}
@media(prefers-reduced-motion:reduce){.thinking-indicator span{animation:none}.brand .codz-chevron-logo,#chat-form .send-button{transition:none}}

#chat-form .composer-tools{width:100%}#chat-form .send-button{margin-left:auto}

/* Global brand removal requested: preserve layout, hide only Codz logo marks. */
.brand-logo,.hero-logo,.codz-chevron-logo,[aria-label="Logo Codz"],svg[aria-label*="Logo Codz"]{display:none!important}

/* Remove all brand marks and favicon artwork site-wide. */
.brand,.brand-logo,.brand-letters,.mobile-brand,.hero-logo,.codz-chevron-logo{display:none!important}

/* Codz chat polish: visible brand, expressive assistant actions, robust mobile layout. */
.topbar{position:relative;min-height:52px}.topbar-brand{position:absolute;left:50%;transform:translateX(-50%);font:800 16px/1 "Space Grotesk",Inter,sans-serif;letter-spacing:.18em;color:var(--text);pointer-events:none}.top-actions{gap:6px}.message-actions{display:flex;align-items:center;gap:6px;margin-top:12px;opacity:1;flex-wrap:wrap}.message-action{width:34px;height:34px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--muted);transition:background .15s,border-color .15s,color .15s,transform .15s}.message-action:hover{background:var(--text);border-color:var(--text);color:var(--bg);transform:translateY(-1px)}.message.assistant .message-content{line-height:1.75}.message.assistant .message-content p{margin:0 0 1em}.message.assistant .message-content pre{max-width:100%;overflow:auto}.nav-item .nav-coming-soon{margin-left:auto;max-width:100%;font-size:9px;letter-spacing:.02em}.free-token-nav{gap:8px}.free-token-nav .nav-coming-soon{color:var(--muted);white-space:nowrap}@media(max-width:640px){.topbar{padding:9px 8px;gap:4px}.topbar-brand{left:calc(50% + 8px);font-size:14px;letter-spacing:.13em}.top-actions{gap:3px}.top-actions .icon-button{width:34px;height:34px}.credit-pill{gap:4px;padding:5px;font-size:11px}.credit-pill span{display:none}.discord-top{display:none}#conversation{width:calc(100% - 20px)!important}.message{padding-inline:2px}.message-actions{gap:5px}.message-action{width:35px;height:35px}.composer-input textarea{font-size:16px!important}.model-picker-toggle{max-width:125px}.model-picker-toggle #model-picker-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* Keep the CODZ wordmark beside the menu, never overlapping mobile actions. */
.topbar-brand{position:static;left:auto;transform:none;margin-left:4px;margin-right:auto;flex:0 0 auto;pointer-events:none}.top-actions{margin-left:auto}@media(max-width:640px){.topbar-brand{position:static;left:auto;transform:none;margin-left:2px;margin-right:auto;font-size:13px;letter-spacing:.12em}.top-actions{margin-left:auto}}

/* Codz sidebar and chat polish */
.codz-sidebar-brand{display:flex;align-items:center;min-height:46px;padding:5px 12px 10px;font-size:21px;font-weight:750;letter-spacing:-.045em;color:var(--text);flex:none}.codz-sidebar-separator{height:1px;background:var(--line);opacity:.85;margin:5px 2px 9px;flex:none}.codz-bottom-separator{margin:9px 2px 7px}.sidebar .main-nav{margin-top:2px}.sidebar .nav-item{min-height:40px}.sidebar .settings-simple-icon{width:17px;height:17px;font-size:16px;display:inline-flex;align-items:center;justify-content:center}.quota-countdown-row,#credits-reset,#token-count,#token-fill,.token-meter,.token-usage,#credits-open,#credits-popover,#redeem-open,.credit-pill,.topbar-brand{display:none!important}#chat-form.composer{border:0!important;box-shadow:none!important;background:transparent!important}#chat-form .composer-input{border-radius:18px}#chat-form textarea{font:inherit;line-height:1.55}#chat-form .send-button{transition:transform .16s ease,opacity .16s ease}#chat-form .send-button:hover{transform:translateY(-1px)}@media(prefers-reduced-motion:reduce){#chat-form .send-button{transition:none}}

/* Disable the legacy CODZ quota/token controls completely. */
#credits-popover,#token-fill,.token-meter,.token-usage,.quota-countdown-row,#credits-reset{display:none!important}

/* Codz prompt composer v2 */
.codz-flaticon-icon{width:17px;height:17px;object-fit:contain;flex:0 0 17px;display:inline-block}
[data-theme="dark"] .codz-flaticon-icon{filter:invert(1) grayscale(1) brightness(1.8)}
.new-chat-flaticon{width:18px;height:18px;flex-basis:18px}.settings-flaticon{width:17px;height:17px;flex-basis:17px}#new-chat{display:flex;align-items:center;gap:10px}
.topbar-brand{display:block!important}.top-actions .credit-pill,#credits-open{display:inline-flex!important}
#redeem-open,.discord-top,#more-toggle,#theme-toggle{display:grid!important}#credits-popover{display:none!important}
.web-research-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--muted);font:inherit;font-size:12px;white-space:nowrap;transition:background .16s,border-color .16s,color .16s}
.web-research-toggle[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg);box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 12%,transparent)}
.web-research-toggle:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.web-research-toggle:hover{background:var(--surface-hover,color-mix(in srgb,var(--text) 6%,transparent));color:var(--text)}.web-research-toggle[aria-pressed="true"]{border-color:#3b82f6;background:color-mix(in srgb,#3b82f6 12%,transparent);color:#60a5fa}
.web-research-toggle .ui-icon{font-size:15px}.model-picker-menu .model-option-icon img{width:22px;height:22px;object-fit:contain}.model-picker-toggle #model-picker-current-icon img{width:22px;height:22px;object-fit:contain}
#chat-form .composer-tools{flex-wrap:nowrap}#chat-form .model-picker-toggle{margin-left:0;max-width:min(240px,34vw)}
@media(max-width:620px){.web-research-toggle{padding:0;gap:5px;font-size:0;width:36px;flex:0 0 36px}.web-research-toggle .ui-icon{font-size:16px}.web-research-toggle span{display:none}#chat-form .model-picker-toggle{max-width:42vw}.top-actions .credit-pill{min-width:0}.topbar-brand{display:block!important}}

/* Keep the model name beside its icon, as requested. */
#model-picker-toggle #model-picker-label{display:inline!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.model-picker-toggle>i{display:inline!important}

.model-picker-toggle #model-picker-current-icon .fi,.model-option-icon .fi{font-size:20px;line-height:1;display:grid;place-items:center;color:var(--ai-brand-color,#f97316)}


/* Final chat polish: keep the prompt layout open and restore quota controls. */
#chat-form .composer-input{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important;padding:12px 4px 8px!important;}
#chat-form .composer-input:focus-within{border:0!important;box-shadow:none!important;background:transparent!important;}
#chat-form textarea{background:transparent!important;}
#credits-popover:not([hidden]){display:block!important;}#credits-popover[hidden]{display:none!important;}
#credits-open,.top-actions .credit-pill{display:inline-flex!important;visibility:visible!important;}

.web-research-toggle[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg);box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 12%,transparent)}
.web-research-toggle:focus-visible{outline:2px solid var(--text);outline-offset:3px}

#redeem-open{display:inline-flex!important;visibility:visible!important;}

/* Contrast-adaptive outline around the chat composer: white in dark mode, dark in light mode. */
#chat-form .composer-input,.composer .composer-input{border:1px solid var(--text)!important;}

/* CODZ chat composer: consistent white outline in both themes. */
html #chat-form .composer-input,html .composer .composer-input{border-color:#fff!important;}


/* CODZ chat creation and composer refinements */
#chat-form .composer-input,#chat-form .composer-input:focus-within{border:1px solid #fff!important;border-radius:28px!important}
#chat-form .composer-input{overflow:visible}
.web-research-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0;min-width:34px;width:36px;height:36px;padding:0;border:1px solid transparent;border-radius:18px;background:transparent;color:var(--muted);transition:background .16s,border-color .16s,color .16s,transform .16s}
.web-research-toggle .ui-icon{width:18px;height:18px;font-size:17px}
.web-research-toggle[aria-pressed="true"]{color:var(--text);background:var(--bg);border-color:var(--line)}
.web-research-label{position:absolute;right:calc(100% + 7px);top:50%;transform:translate(5px,-50%);opacity:0;pointer-events:none;white-space:nowrap;font-size:12px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:6px 9px;box-shadow:0 4px 18px #00000010}
.web-research-label.show{animation:research-label-in .22s ease-out both}
.web-research-toggle.research-animate .ui-icon{animation:research-icon-pop .42s cubic-bezier(.2,.8,.2,1)}
@keyframes research-label-in{0%{opacity:0;transform:translate(5px,-50%) scale(.96)}100%{opacity:1;transform:translate(0,-50%) scale(1)}}
@keyframes research-icon-pop{0%{transform:scale(.78) rotate(-18deg)}65%{transform:scale(1.13) rotate(7deg)}100%{transform:scale(1) rotate(0)}}
.project-list{display:grid;gap:3px;margin:2px 0 4px;max-height:30vh;overflow:auto}
.project-history-item{display:flex;align-items:center;gap:9px;width:100%;min-width:0;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--muted);text-align:left;font:inherit;font-size:13px;cursor:pointer}
.project-history-item:hover,.project-history-item.active{background:var(--surface);color:var(--text)}
.project-history-item .ui-icon{flex:none;font-size:15px}
.project-history-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-nav-disabled{opacity:.45;pointer-events:none;cursor:not-allowed}
.account-links a[href="/settings.html"]{display:none!important}
.codz-create-dialog{width:min(560px,calc(100vw - 28px));max-height:min(88dvh,820px);overflow:auto}
.codz-create-dialog .codz-dialog-form{gap:15px}
.create-field{display:grid;gap:7px;font-size:13px;font-weight:600;color:var(--text)}
.create-field small{font-weight:400;color:var(--muted)}
.create-field .codz-dialog-input{margin:0;box-sizing:border-box}
.create-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.create-mode-tab{min-height:40px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:650;cursor:pointer;transition:background .14s,color .14s,border-color .14s}
.create-mode-tab.active{background:var(--bg);border-color:var(--line);color:var(--text);box-shadow:0 1px 3px #00000008}
.project-fields{display:grid;gap:13px}
.project-fields[hidden]{display:none!important}
.codz-create-dialog .codz-dialog-footer{position:sticky;bottom:-1px;padding-top:10px;background:var(--bg)}
@media(prefers-reduced-motion:reduce){.web-research-label.show,.web-research-toggle.research-animate .ui-icon{animation:none!important}}

/* Keep the animated research label visible on narrow screens. */
.web-research-toggle .web-research-label{display:block!important}