:root{--bg:#070b16;--panel:rgba(15,23,42,.78);--panel2:rgba(18,27,46,.88);--card:rgba(255,255,255,.07);--card2:rgba(255,255,255,.1);--line:rgba(255,255,255,.12);--text:#f8fafc;--muted:#94a3b8;--muted2:#64748b;--primary:#4b7cff;--cyan:#68e1fd;--danger:#fb7185;--success:#34d399;--shadow:0 24px 80px rgba(0,0,0,.42);--sidebar:300px;--context:320px;--radius:22px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button{border:0;cursor:pointer}a{color:inherit;text-decoration:none}.hidden{display:none!important}.app-shell{height:100vh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);background:radial-gradient(circle at 12% 8%,rgba(75,124,255,.24),transparent 32%),radial-gradient(circle at 85% 92%,rgba(104,225,253,.18),transparent 34%),linear-gradient(145deg,#070b16,#0b1020 54%,#071626)}.sidebar,.context-panel{min-height:0;background:rgba(10,16,30,.72);backdrop-filter:blur(22px);border-color:var(--line);border-style:solid}.sidebar{border-width:0 1px 0 0;padding:16px;display:flex;flex-direction:column;gap:14px}.context-panel{border-width:0 0 0 1px;padding:18px;overflow:auto}.sidebar-brand,.chat-topbar,.context-head,.side-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px;font-weight:900}.brand-mark,.welcome-logo,.chat-account-avatar,.v-avatar{background:linear-gradient(135deg,var(--primary),var(--cyan));box-shadow:0 18px 42px rgba(75,124,255,.28);color:#fff}.brand-mark{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;font-weight:900}.brand-text{font-size:18px}.icon-btn{width:38px;height:38px;border-radius:14px;background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--line)}.icon-btn:hover,.tool-btn:hover{background:rgba(255,255,255,.13)}.mobile-close,.menu-btn{display:none}.new-chat-btn{width:100%;height:48px;border-radius:17px;background:linear-gradient(135deg,var(--primary),var(--cyan));color:white;font-weight:900;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 18px 45px rgba(75,124,255,.25)}.side-block{border:1px solid var(--line);background:rgba(255,255,255,.045);border-radius:20px;padding:12px;min-height:0}.history-block{flex:1;display:flex;flex-direction:column}.side-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:900;margin-bottom:10px}.side-title button{width:28px;height:28px;border-radius:10px;background:rgba(255,255,255,.08);color:var(--text)}.project-list,.chat-list{display:flex;flex-direction:column;gap:8px;overflow:auto}.project-list{max-height:150px}.chat-list{min-height:0;flex:1;padding-right:2px}.project-item,.chat-item{position:relative;border-radius:15px;background:transparent;color:var(--muted);padding:11px 12px;border:1px solid transparent;text-align:left}.project-item:hover,.chat-item:hover,.project-item.active,.chat-item.active{background:rgba(255,255,255,.09);border-color:rgba(104,225,253,.22);color:var(--text)}.search-box{height:42px;border:1px solid var(--line);border-radius:15px;background:rgba(0,0,0,.18);display:flex;align-items:center;gap:9px;padding:0 12px;margin-bottom:10px;color:var(--muted)}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--text)}.chat-item{display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:5px}.chat-item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.chat-more{width:28px;height:28px;border-radius:10px;background:transparent;color:var(--muted)}.chat-menu{display:none;position:absolute;right:10px;top:38px;z-index:20;min-width:136px;border:1px solid var(--line);border-radius:14px;background:#101827;box-shadow:var(--shadow);padding:6px}.chat-menu.open{display:block}.chat-menu button{display:block;width:100%;text-align:left;background:transparent;color:var(--text);border-radius:10px;padding:9px}.chat-menu .danger{color:var(--danger)}.load-more{margin-top:10px;width:100%;height:38px;border-radius:13px;background:rgba(255,255,255,.07);color:var(--muted);border:1px solid var(--line)}.load-more.hidden{display:none}.sidebar-footer{display:grid;gap:8px}.footer-item{height:42px;border-radius:14px;padding:0 12px;display:flex;align-items:center;gap:10px;color:var(--muted);background:rgba(255,255,255,.045);border:1px solid transparent}.footer-item:hover{color:var(--text);border-color:var(--line)}.chat-main{min-width:0;display:flex;flex-direction:column;min-height:0}.chat-topbar{height:70px;padding:12px 18px;border-bottom:1px solid var(--line);background:rgba(9,14,26,.48);backdrop-filter:blur(18px)}.topbar-title{min-width:0;display:flex;flex-direction:column;gap:4px;flex:1}.chat-title-input{border:0;outline:0;background:transparent;color:var(--text);font-size:18px;font-weight:900;min-width:0}.topbar-title span{font-size:12px;color:var(--muted)}.topbar-actions{display:flex;align-items:center;gap:10px}.plan-pill{height:36px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.06);padding:0 12px;display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:800}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(52,211,153,.12)}.chat-account-avatar{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;font-weight:900}.messages{flex:1;min-height:0;overflow:auto;padding:28px max(20px,6vw)}.welcome{max-width:820px;margin:8vh auto 0;text-align:center}.welcome-logo{width:72px;height:72px;border-radius:25px;display:grid;place-items:center;font-size:38px;font-weight:900;margin:0 auto 20px}.welcome h1{font-size:clamp(30px,5vw,54px);line-height:1.02;margin:0 0 12px}.welcome p{margin:0 auto 26px;max-width:610px;color:var(--muted);font-size:16px}.prompt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.prompt-card{min-height:68px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--text);text-align:left;padding:18px;font-weight:800}.prompt-card:hover{background:rgba(255,255,255,.11);border-color:rgba(104,225,253,.28)}.message-row{display:flex;gap:12px;margin:18px auto;max-width:920px}.message-row.user{justify-content:flex-end}.avatar{width:34px;height:34px;border-radius:13px;flex:0 0 34px;display:grid;place-items:center;font-weight:900;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--muted)}.message-row.ai .avatar{background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff}.bubble-wrap{max-width:min(740px,80%)}.bubble{border:1px solid var(--line);border-radius:23px;padding:14px 16px;background:rgba(255,255,255,.07);line-height:1.65;box-shadow:0 12px 40px rgba(0,0,0,.14);white-space:normal;overflow-wrap:anywhere}.message-row.user .bubble{background:linear-gradient(135deg,rgba(75,124,255,.96),rgba(104,225,253,.82));border-color:transparent;color:#fff;border-bottom-right-radius:8px}.message-row.ai .bubble{border-bottom-left-radius:8px}.bubble p{margin:0 0 10px}.bubble p:last-child{margin-bottom:0}.bubble pre{overflow:auto;border-radius:16px;padding:14px;background:#0b1020}.msg-actions{display:flex;gap:6px;margin-top:8px;opacity:.72}.msg-action{width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.06);color:var(--muted)}.typing{display:flex;gap:5px;padding:4px}.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:pulse 1s infinite}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}@keyframes pulse{50%{opacity:.3;transform:translateY(-2px)}}.composer-wrap{padding:12px max(16px,5vw) calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(9,14,26,.56);backdrop-filter:blur(18px)}.composer{max-width:920px;margin:0 auto;display:flex;align-items:flex-end;gap:8px;border:1px solid rgba(104,225,253,.2);background:rgba(255,255,255,.08);border-radius:24px;padding:9px;box-shadow:0 16px 60px rgba(0,0,0,.18)}.composer textarea{flex:1;max-height:180px;min-height:42px;resize:none;border:0;outline:0;background:transparent;color:var(--text);padding:10px 8px}.tool-btn,.send-btn{width:42px;height:42px;flex:0 0 42px;border-radius:16px;color:var(--text);background:rgba(255,255,255,.08)}.send-btn{background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff}.composer-hint{text-align:center;color:var(--muted2);font-size:12px;margin:8px 0 0}.plus-wrap{position:relative}.plus-menu{display:none;position:absolute;left:0;bottom:50px;min-width:178px;padding:8px;border:1px solid var(--line);border-radius:16px;background:#101827;box-shadow:var(--shadow)}.plus-menu.open{display:block}.plus-menu-item{width:100%;display:flex;align-items:center;gap:10px;border-radius:12px;padding:10px;background:transparent;color:var(--text);text-align:left}.attachment-preview{max-width:920px;margin:0 auto 8px;display:flex;gap:8px;flex-wrap:wrap}.attachment-chip{display:flex;align-items:center;gap:8px;max-width:220px;border:1px solid var(--line);background:rgba(255,255,255,.07);border-radius:14px;padding:7px 9px;color:var(--muted);font-size:13px}.attachment-chip img{width:26px;height:26px;border-radius:8px;object-fit:cover}.context-head{margin-bottom:18px}.context-head p{margin:0;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:900}.context-head h2{margin:4px 0 0;font-size:20px}.context-card{border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.06);padding:16px;margin-bottom:12px}.context-label{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;margin-bottom:8px}.context-card strong{display:block;margin-bottom:8px}.context-card p{margin:0;color:var(--muted);line-height:1.55}.memory-preview{color:var(--muted);line-height:1.55;display:grid;gap:8px}.memory-mini{padding:10px;border-radius:14px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08)}.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:#101827;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:12px 18px;box-shadow:var(--shadow);z-index:1000;transition:.2s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.quota-modal,.project-modal{position:fixed;inset:0;z-index:2000;display:none;place-items:center;background:rgba(3,7,15,.68);backdrop-filter:blur(10px);padding:22px}.quota-modal.show,.project-modal.show{display:grid}.quota-card,.project-modal-card{width:min(460px,100%);padding:26px;border-radius:26px;background:#121827;border:1px solid rgba(104,225,253,.24);box-shadow:var(--shadow)}.quota-card{text-align:center}.v-avatar{margin:0 auto 16px;width:58px;height:58px;border-radius:20px;display:grid;place-items:center;font-size:28px;font-weight:900}.quota-actions,.project-modal-top{display:flex;gap:10px;justify-content:space-between;align-items:center}.quota-actions{justify-content:center;flex-wrap:wrap}.quota-actions a,.quota-actions button,.project-save-btn{border:1px solid var(--line);border-radius:999px;padding:12px 18px;font-weight:900}.quota-actions a,.project-save-btn{background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff}.quota-actions button{background:rgba(255,255,255,.06);color:#fff}.project-form{display:grid;gap:12px}.project-form input,.project-form textarea{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.07);color:var(--text);padding:13px;outline:0}.project-form textarea{min-height:110px;resize:vertical}.project-modal-top button{background:transparent;color:var(--text);font-size:20px}.mobile-overlay{display:none}
@media (max-width:1100px){.app-shell{grid-template-columns:var(--sidebar) minmax(0,1fr)}.context-panel{position:fixed;right:0;top:0;bottom:0;width:min(360px,92vw);z-index:70;transform:translateX(105%);transition:.22s}.context-panel.open{transform:translateX(0)}}
@media (max-width:760px){body{overflow:hidden}.app-shell{display:flex}.sidebar{position:fixed;left:0;top:0;bottom:0;width:min(320px,88vw);z-index:80;transform:translateX(-105%);transition:.22s}.sidebar.open{transform:translateX(0)}.mobile-overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.44);z-index:75}.mobile-close,.menu-btn{display:grid;place-items:center}.chat-topbar{height:64px;padding:10px 12px}.context-toggle{display:grid}.plan-pill{display:none}.chat-account-avatar{width:34px;height:34px;border-radius:12px}.messages{padding:18px 12px}.welcome{margin-top:4vh}.prompt-grid{grid-template-columns:1fr}.message-row{max-width:100%;gap:8px}.avatar{display:none}.bubble-wrap{max-width:88%}.bubble{padding:12px 14px;border-radius:18px}.composer-wrap{padding:10px 10px calc(10px + env(safe-area-inset-bottom))}.composer{border-radius:20px}.tool-btn,.send-btn{width:38px;height:38px;flex-basis:38px;border-radius:14px}.voice-btn{display:none}.composer-hint{display:none}}
.chat-lang-switcher{height:36px;align-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px;flex:0 0 auto}.chat-lang-switcher button{height:26px;padding:0 9px;border-radius:999px;background:transparent;color:var(--muted);font-size:11px;font-weight:900}.chat-lang-switcher button.active{background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff}@media (max-width:760px){.chat-lang-switcher{display:none}}


/* Phase 3.5.2 Chat polish: customer-facing chat keeps a clean two-column layout. */
.app-shell{grid-template-columns:var(--sidebar) minmax(0,1fr);}
.context-panel.customer-hidden{display:none!important;}
.context-toggle,.chat-lang-switcher{display:none!important;}
.messages{padding:30px max(24px,8vw);}
.message-row,.composer,.attachment-preview{max-width:980px;}
.bubble-wrap{max-width:min(820px,82%);}
.welcome{max-width:900px;}
.composer{border-radius:26px;background:rgba(255,255,255,.09);border-color:rgba(104,225,253,.24);}
.composer:focus-within{border-color:rgba(104,225,253,.48);box-shadow:0 18px 70px rgba(75,124,255,.18);}
@media (max-width:1100px){.app-shell{grid-template-columns:var(--sidebar) minmax(0,1fr);}.context-panel{display:none!important;}}
@media (max-width:760px){.app-shell{display:flex}.messages{padding:18px 12px}.bubble-wrap{max-width:88%}.topbar-actions{gap:8px}.chat-title-input{font-size:16px}}


/* Phase 3.5.3 Workspace simplification */
.workspace-create-btn.hidden{display:none!important;}
.workspace-create-btn{opacity:.86;}
.project-list{max-height:96px;}
.project-item{font-weight:800;}
.project-item:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(52,211,153,.12);margin-right:8px;vertical-align:middle;}
.project-modal-top h2{font-size:20px;margin:0;}

/* Phase 3.5.4: account identity + footer disclaimer */
.user-account-card{
  min-height:56px;
  border-radius:18px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  background:rgba(255,255,255,.065);
  border:1px solid rgba(104,225,253,.16);
  overflow:hidden;
}
.user-account-card:hover{background:rgba(255,255,255,.1);border-color:rgba(104,225,253,.3)}
.user-avatar-mini{width:34px;height:34px;flex:0 0 34px;border-radius:13px;display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--primary),var(--cyan));box-shadow:0 12px 30px rgba(75,124,255,.25)}
.user-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.user-meta strong{display:block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:900;color:#f8fafc}
.user-meta small{font-size:11px;color:var(--muted);font-weight:700}
.composer-note-row{max-width:920px;margin:8px auto 0;display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--muted2);font-size:12px;text-align:left}
.composer-note-row .composer-hint{margin:0;text-align:left;color:var(--muted2)}
.ai-disclaimer{text-align:right;color:var(--muted2)}
@media (max-width:760px){.composer-note-row{display:none}.user-meta strong{max-width:210px}}


/* Phase 3.5.5 account area polish */
.topbar-actions{display:none!important}
.sidebar-footer{gap:0}
.user-account-card{align-items:center;gap:11px}
.user-avatar-mini{font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.user-meta{min-width:0}
.user-meta strong{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-plan-line{display:block;margin-top:3px;font-size:12px;color:#a9f3ff;font-weight:800;line-height:1.25}
.user-meta small{display:block;margin-top:3px;color:var(--muted2);font-size:12px;line-height:1.25}
@media (max-width:760px){.topbar-actions{display:none!important}.user-meta strong{max-width:210px}}


/* Phase 3.5.7 chat bubble symmetry, user initials, and table rendering */
.message-row{align-items:flex-start;gap:12px;}
.message-row.user{justify-content:flex-end;}
.message-row.user .avatar{order:2;background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff;border-color:transparent;font-size:12px;letter-spacing:.02em;text-transform:uppercase;box-shadow:0 14px 34px rgba(75,124,255,.25)}
.message-row.user .bubble-wrap{order:1;display:flex;flex-direction:column;align-items:flex-end;}
.message-row.ai .bubble-wrap{display:flex;flex-direction:column;align-items:flex-start;}
.bubble{border-radius:24px!important;}
.message-row.user .bubble{border-radius:24px!important;background:linear-gradient(135deg,rgba(75,124,255,.96),rgba(104,225,253,.84));}
.message-row.ai .bubble{border-radius:24px!important;}
.message-row.user .msg-actions{justify-content:flex-end;}
.table-scroll{width:100%;overflow-x:auto;margin:12px 0;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.16)}
.table-scroll table{width:100%;min-width:620px;border-collapse:collapse;font-size:14px;line-height:1.45;white-space:normal;}
.table-scroll th,.table-scroll td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.09);border-right:1px solid rgba(255,255,255,.06);text-align:left;vertical-align:top;}
.table-scroll th{color:#f8fafc;background:rgba(104,225,253,.09);font-weight:900;}
.table-scroll tr:last-child td{border-bottom:0;}
.table-scroll th:last-child,.table-scroll td:last-child{border-right:0;}
@media (max-width:760px){.message-row.user .avatar{display:grid;width:30px;height:30px;flex-basis:30px;border-radius:11px}.bubble-wrap{max-width:84%}.table-scroll table{min-width:560px;font-size:13px}}


/* Final launch polish: balanced chat surfaces and responsive interaction details. */
:root{--ui-ease:cubic-bezier(.2,.8,.2,1);--soft-line:rgba(104,225,253,.16);--surface-hover:rgba(255,255,255,.095)}
.icon-btn,.tool-btn,.send-btn,.new-chat-btn,.prompt-card,.project-item,.chat-item,.load-more,.user-account-card,.plus-menu-item,.msg-action{transition:background-color .2s var(--ui-ease),border-color .2s var(--ui-ease),color .2s var(--ui-ease),box-shadow .24s var(--ui-ease),transform .2s var(--ui-ease)}
.sidebar{gap:16px;padding:18px 16px 16px;background:linear-gradient(180deg,rgba(11,18,35,.92),rgba(8,14,28,.82));box-shadow:18px 0 52px rgba(0,0,0,.18)}
.sidebar-brand{padding:1px 2px 3px}
.brand{gap:12px}
.brand-mark{width:40px;height:40px;border-radius:15px}
.brand:hover .brand-mark{box-shadow:0 20px 44px rgba(75,124,255,.38);transform:translateY(-1px)}
.brand-copy{display:flex;flex-direction:column;gap:2px;line-height:1}
.brand-text{font-size:18px;letter-spacing:-.02em}
.brand-subtitle{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.new-chat-btn{height:50px;border-radius:16px;box-shadow:0 16px 38px rgba(75,124,255,.24)}
.new-chat-btn:hover{box-shadow:0 20px 48px rgba(75,124,255,.36);transform:translateY(-1px)}
.side-block{padding:13px;border-color:rgba(255,255,255,.105);background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.035));border-radius:19px}
.side-title{margin-bottom:12px;color:#91a4c3}
.search-box{height:44px;margin-bottom:12px;border-color:rgba(255,255,255,.105);transition:border-color .2s var(--ui-ease),box-shadow .2s var(--ui-ease),background-color .2s var(--ui-ease)}
.search-box:focus-within{border-color:rgba(104,225,253,.36);background:rgba(0,0,0,.24);box-shadow:0 0 0 3px rgba(75,124,255,.12)}
.project-item,.chat-item{border-radius:14px;padding:12px}
.project-item:hover,.chat-item:hover{background:rgba(255,255,255,.075);transform:translateX(1px)}
.project-item.active,.chat-item.active{background:linear-gradient(110deg,rgba(75,124,255,.15),rgba(104,225,253,.07));border-color:rgba(104,225,253,.26)}
.load-more:hover{background:var(--surface-hover);border-color:rgba(104,225,253,.24);color:var(--text)}
.user-account-card{min-height:62px;padding:11px 12px;background:linear-gradient(120deg,rgba(75,124,255,.1),rgba(255,255,255,.055));border-color:var(--soft-line)}
.user-account-card:hover{background:linear-gradient(120deg,rgba(75,124,255,.17),rgba(104,225,253,.08));border-color:rgba(104,225,253,.34);transform:translateY(-1px)}
.chat-topbar{height:72px;padding:13px clamp(16px,3vw,34px);background:rgba(9,14,26,.62)}
.messages{padding:32px clamp(18px,7vw,86px) 22px;scroll-behavior:smooth}
.message-row{max-width:980px;gap:14px;margin:0 auto 22px;align-items:flex-start}
.avatar{width:38px;height:38px;flex-basis:38px;border-radius:14px}
.message-row.user .avatar{width:38px;height:38px;flex-basis:38px;border-radius:14px}
.bubble-wrap{max-width:min(800px,calc(100% - 54px))}
.bubble{padding:15px 18px;border-radius:22px!important;border-color:rgba(255,255,255,.115);background:rgba(255,255,255,.065);line-height:1.62;box-shadow:0 12px 34px rgba(0,0,0,.12);transition:border-color .2s var(--ui-ease),background-color .2s var(--ui-ease),box-shadow .22s var(--ui-ease)}
.message-row.ai .bubble,.message-row.user .bubble{border-radius:22px!important}
.message-row.user .bubble{border:1px solid rgba(104,225,253,.16);background:linear-gradient(132deg,rgba(75,124,255,.88),rgba(50,161,215,.78))}
.message-row:hover .bubble{border-color:rgba(104,225,253,.25);box-shadow:0 16px 42px rgba(0,0,0,.17)}
.msg-actions{min-height:30px;margin-top:7px;opacity:0;transform:translateY(-2px);transition:opacity .18s var(--ui-ease),transform .18s var(--ui-ease)}
.message-row:hover .msg-actions,.message-row:focus-within .msg-actions{opacity:1;transform:translateY(0)}
.msg-action:hover{background:rgba(104,225,253,.12);color:var(--text)}
.bubble pre{margin:12px 0 0;border:1px solid rgba(255,255,255,.08)}
.table-scroll{max-width:100%;margin:14px 0 4px;border-color:rgba(104,225,253,.2);border-radius:15px;background:rgba(5,10,21,.3);scrollbar-color:rgba(104,225,253,.4) transparent;scrollbar-width:thin}
.table-scroll:focus{outline:2px solid rgba(104,225,253,.38);outline-offset:2px}
.table-scroll table{width:100%;min-width:540px;font-size:14px;line-height:1.5}
.table-scroll th,.table-scroll td{padding:11px 13px}
.table-scroll th{background:rgba(75,124,255,.15);color:#edf6ff;white-space:nowrap}
.table-scroll tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
.table-scroll tbody tr:hover{background:rgba(104,225,253,.055)}
.table-scroll .align-center{text-align:center}
.table-scroll .align-right{text-align:right}
.composer-wrap{padding:13px clamp(14px,5vw,60px) calc(14px + env(safe-area-inset-bottom));background:rgba(9,14,26,.66)}
.composer,.attachment-preview,.composer-note-row{max-width:980px}
.composer{gap:9px;padding:9px 10px;border-radius:25px;background:rgba(255,255,255,.075)}
.composer textarea{padding:10px 9px;line-height:1.45}
.tool-btn:hover{transform:translateY(-1px)}
.send-btn:hover{box-shadow:0 11px 27px rgba(75,124,255,.4);transform:translateY(-1px)}
.plus-menu{border-color:rgba(104,225,253,.2);background:rgba(13,21,38,.98)}
.plus-menu-item:hover{background:rgba(104,225,253,.09)}
@media (hover:none){.msg-actions{opacity:1;transform:none}}
@media (max-width:760px){
  .sidebar{width:min(316px,86vw);padding:16px 14px calc(14px + env(safe-area-inset-bottom));transition:transform .28s var(--ui-ease)}
  .mobile-overlay{display:block;opacity:0;visibility:hidden;pointer-events:none;background:rgba(3,7,15,.58);backdrop-filter:blur(3px);transition:opacity .25s var(--ui-ease),visibility .25s var(--ui-ease)}
  .mobile-overlay.show{display:block;opacity:1;visibility:visible;pointer-events:auto}
  .chat-topbar{height:62px;padding:9px 10px}
  .messages{padding:16px 10px 12px}
  .message-row{gap:8px;margin-bottom:16px}
  .message-row .avatar,.message-row.user .avatar{display:grid;width:30px;height:30px;flex-basis:30px;border-radius:11px;font-size:11px}
  .bubble-wrap{max-width:calc(100% - 38px)}
  .bubble{padding:12px 13px;border-radius:18px!important;font-size:14px;line-height:1.58}
  .message-row.ai .bubble,.message-row.user .bubble{border-radius:18px!important}
  .msg-actions{opacity:1;transform:none;margin-top:5px}
  .table-scroll{margin:11px -3px 2px;width:calc(100% + 6px);border-radius:12px}
  .table-scroll table{min-width:450px;font-size:12.5px}
  .table-scroll th,.table-scroll td{padding:9px 10px}
  .composer-wrap{padding:9px 8px calc(9px + env(safe-area-inset-bottom))}
  .composer{gap:5px;padding:7px;border-radius:19px}
  .composer textarea{min-height:40px;padding:9px 5px}
  .tool-btn,.send-btn{width:40px;height:40px;flex-basis:40px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Phase 3.5.8 creative tools navigation */
.chat-product-nav{padding:6px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;border-radius:16px;border:1px solid rgba(255,255,255,.105);background:rgba(255,255,255,.04)}
.chat-product-nav a{height:40px;position:relative;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:4px;color:var(--muted);font-size:10px;font-weight:700;border:1px solid transparent;transition:background-color .2s var(--ui-ease),border-color .2s var(--ui-ease),color .2s var(--ui-ease)}
.chat-product-nav a:hover,.chat-product-nav a.active{color:var(--text);background:rgba(104,225,253,.075);border-color:rgba(104,225,253,.18)}
.chat-product-nav small{position:absolute;top:-8px;right:5px;padding:2px 5px;border-radius:999px;color:#a9f3ff;background:#13233d;border:1px solid rgba(104,225,253,.22);font-size:9px;text-transform:uppercase}

/* Phase 4.1.1 Chat multimodal upload */
.attachment-chip{max-width:280px}
.attachment-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attachment-chip small{flex:0 0 auto;border:1px solid rgba(104,225,253,.18);border-radius:999px;padding:2px 6px;color:#a9f3ff;font-size:10px;font-weight:900;line-height:1}
.attachment-chip button{width:22px;height:22px;flex:0 0 22px;border-radius:8px;background:rgba(255,255,255,.08);color:var(--muted)}
.attachment-chip button:hover{background:rgba(251,113,133,.16);color:#fff}

/* Phase 4.2.1 Router ability menu */
.plus-menu{min-width:220px}
.plus-menu-item i{width:18px;text-align:center;color:#a9f3ff}
.plus-menu-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 4.9.2.4 Unified Chat Composer Phase 1 */
.composer-ability-bar{
  max-width:980px;
  margin:0 auto 9px;
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.composer-ability-bar::-webkit-scrollbar{display:none}
.ability-btn{
  height:32px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.105);
  border-radius:999px;
  padding:0 11px;
  background:rgba(255,255,255,.038);
  color:rgba(203,213,225,.78);
  font-size:12px;
  font-weight:800;
  transition:background-color .2s var(--ui-ease),border-color .2s var(--ui-ease),color .2s var(--ui-ease),transform .2s var(--ui-ease);
}
.ability-btn i{color:rgba(169,243,255,.76)}
.ability-btn:hover{
  color:var(--text);
  background:rgba(255,255,255,.07);
  border-color:rgba(104,225,253,.22);
  transform:translateY(-1px);
}
.ability-btn.active{
  color:#fff;
  background:linear-gradient(135deg,rgba(75,124,255,.34),rgba(104,225,253,.18));
  border-color:rgba(104,225,253,.44);
  box-shadow:0 8px 24px rgba(75,124,255,.18);
}
.ability-btn.active i{color:#d8fbff}
@media (max-width:760px){
  .composer-ability-bar{
    margin-bottom:7px;
    padding:0 1px 1px;
    gap:6px;
  }
  .ability-btn{
    height:31px;
    padding:0 10px;
    font-size:11px;
  }
}


/* 4.9.1 regression fix: keep conversation history in the dark sidebar theme. */
.chat-list .chat-item {
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  grid-template-columns: minmax(0,1fr) 32px !important;
  overflow: visible;
}

.chat-list .chat-item:hover {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(104,225,253,.22) !important;
  color: var(--text) !important;
}

.chat-list .chat-item.active {
  background: linear-gradient(110deg, rgba(75,124,255,.15), rgba(104,225,253,.07)) !important;
  border-color: rgba(104,225,253,.26) !important;
  color: var(--text) !important;
}

.chat-list .chat-item-title,
.chat-list .chat-more {
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  box-shadow: none !important;
}

.chat-list .chat-item-title {
  min-width: 0;
  width: 100%;
  padding: 0;
  text-align: left;
  font-weight: 800;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-list .chat-more {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.chat-list .chat-menu {
  background: #101827 !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  right: 6px !important;
  top: 34px !important;
  z-index: 200 !important;
  min-width: 148px;
}

.history-floating-menu {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3000 !important;
  min-width: 148px !important;
  background: #101827 !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow) !important;
  padding: 6px !important;
}

.history-floating-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text);
  border-radius: 10px;
  padding: 9px 10px;
}

.history-floating-menu button:hover {
  background: rgba(255,255,255,.08);
}

.history-floating-menu .danger {
  color: var(--danger);
}

/* 4.9.2.6 Welcome prompts: lighter cards for random prompt entry points. */
.welcome .prompt-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 9px;
}

.welcome .prompt-card {
  min-height: 46px;
  border-radius: 15px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width:760px) {
  .welcome .prompt-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .welcome .prompt-card {
    min-height: 42px;
    padding: 9px 11px;
    font-size: 12.5px;
  }
}

/* 4.9.3.1 CSS-only mobile polish */
@media (max-width:760px) {
  .composer-wrap {
    padding: 9px 10px calc(12px + env(safe-area-inset-bottom));
  }

  .composer-ability-bar {
    gap: 7px;
    padding: 0 2px 2px;
    scroll-padding-inline: 2px;
  }

  .ability-btn {
    min-height: 42px;
    height: 42px;
    padding: 0 13px;
    font-size: 12px;
  }

  .composer textarea {
    max-height: 120px;
    min-height: 42px;
    line-height: 1.42;
  }

  .tool-btn,
  .send-btn {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .chat-list .chat-item {
    grid-template-columns: minmax(0,1fr) 44px !important;
    padding: 9px 8px 9px 12px;
  }

  .chat-list .chat-more {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 13px;
  }

  .plus-menu {
    left: 0;
    bottom: calc(54px + env(safe-area-inset-bottom));
    width: max-content;
    max-width: calc(100vw - 24px);
  }

  .plus-menu-item {
    min-height: 44px;
  }

  .history-floating-menu {
    max-width: calc(100vw - 24px) !important;
  }

  .history-floating-menu button {
    min-height: 44px;
  }

  .attachment-chip button {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}

html[dir="rtl"] .chat-list .chat-item-title,
html[dir="rtl"] .history-floating-menu button,
html[dir="rtl"] .plus-menu-item {
  text-align: right;
}

html[dir="rtl"] .plus-menu {
  left: auto;
  right: 0;
}

html[dir="rtl"] .plus-menu-item i {
  text-align: center;
}

/* 4.10.1-B Function Card Framework */
.function-card-panel {
  max-width: 980px;
  margin: 0 auto 9px;
  border: 1px solid rgba(104,225,253,.22);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(18,27,46,.94), rgba(13,21,38,.88));
  box-shadow: 0 16px 48px rgba(0,0,0,.2);
  padding: 14px;
}

.function-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.function-card-title-wrap {
  min-width: 0;
}

.function-card-title-wrap strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.function-card-title-wrap p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.function-card-close {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 12px;
  opacity: .76;
}

.function-card-close:hover {
  background: rgba(255,255,255,.09);
  color: var(--text);
  border-color: rgba(104,225,253,.24);
  opacity: 1;
}

.function-card-body {
  margin-top: 12px;
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(226,232,240,.84);
  padding: 12px 13px;
  font-size: 13px;
  line-height: 1.55;
}

.function-card-copy {
  margin: 0;
}

.function-card-controls {
  display: grid;
  gap: 11px;
  margin-top: 12px;
}

.function-card-control {
  display: grid;
  gap: 7px;
}

.function-card-control-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.function-card-choice-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.function-card-choice {
  min-height: 34px;
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(226,232,240,.82);
  font-size: 12px;
  font-weight: 800;
}

.function-card-choice:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(104,225,253,.24);
  color: var(--text);
}

.function-card-choice.active {
  background: linear-gradient(135deg,rgba(75,124,255,.3),rgba(104,225,253,.16));
  border-color: rgba(104,225,253,.42);
  color: #fff;
}

@media (max-width:760px) {
  .function-card-panel {
    max-height: min(34vh, 260px);
    overflow-y: auto;
    margin-bottom: 8px;
    padding: 12px;
    border-radius: 18px;
  }

  .function-card-close {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 10px;
  }

  .function-card-body {
    padding: 11px;
  }

  .function-card-choice {
    min-height: 38px;
  }
}

html[dir="rtl"] .function-card-title-wrap,
html[dir="rtl"] .function-card-body {
  text-align: right;
}