:root{ --bg:#F7F2F0;--sidebar-bg:#FFF9F2;--panel:#FFFDF8;--panel-2:#F4E8E3;--panel-3:#EFE3D5; --surface:#FFF6E9;--surface-2:#FFF8EE;--surface-3:#FFF9F3;--hover:#F0DEE4;--active:#EAD7DD; --line:#DCCBC5;--line-strong:#D8C5BC;--text:#493A37;--muted:#806F6B;--muted-2:#A18D86; --accent:#A45F72;--accent-2:#7D536A;--accent-rgb:141,108,255;--accent2-rgb:109,82,217; --sidebar:292px;--radius:14px;--shadow:0 22px 60px rgba(105,78,68,.14);--chat-width:820px;--composer-width:780px; } html[data-theme="graphite"]{ --bg:#090a0c;--sidebar-bg:#0d0e10;--panel:#FFF7ED;--panel-2:#17191d;--panel-3:#1d2025; --surface:#F3E8DE;--surface-2:#191b1f;--surface-3:#101214;--hover:#1d2024;--active:#24272c; --line:#292c31;--line-strong:#393d44;--text:#f2f3f5;--muted:#a0a3aa;--muted-2:#70747c; } html[data-theme="deep-space"]{ --bg:#050a13;--sidebar-bg:#070c16;--panel:#09111d;--panel-2:#0c1624;--panel-3:#101d2d; --surface:#0b1421;--surface-2:#0e1928;--surface-3:#08111d;--hover:#102033;--active:#14263b; --line:#1d3149;--line-strong:#294867;--text:#f2f6fb;--muted:#98a9bc;--muted-2:#65778c; } html[data-theme="light"]{ --bg:#f3f5f8;--sidebar-bg:#f8f9fb;--panel:#ffffff;--panel-2:#f0f3f7;--panel-3:#e8edf3; --surface:#f0f2f5;--surface-2:#ffffff;--surface-3:#ffffff;--hover:#eceff4;--active:#e4e9f0; --line:#d9dee7;--line-strong:#c7ced9;--text:#171b24;--muted:#596273;--muted-2:#7b8493; --shadow:0 22px 60px rgba(40,54,85,.13); } html[data-theme="oled"]{ --bg:#000000;--sidebar-bg:#050505;--panel:#090909;--panel-2:#0d0d0d;--panel-3:#121212; --surface:#0a0a0a;--surface-2:#101010;--surface-3:#050505;--hover:#151515;--active:#1b1b1b; --line:#222222;--line-strong:#333333;--text:#f7f7f7;--muted:#a0a0a0;--muted-2:#6e6e6e; --shadow:0 22px 60px rgba(104,76,68,.26); } html[data-theme="warm"]{ --bg:#f5f0e8;--sidebar-bg:#f8f4ed;--panel:#fffaf2;--panel-2:#f1eadf;--panel-3:#ebe2d5; --surface:#f2ebe2;--surface-2:#fffaf2;--surface-3:#fffdf9;--hover:#4B39355da;--active:#e7ddcf; --line:#ddd1c2;--line-strong:#cbbbaa;--text:#28221d;--muted:#6b5e53;--muted-2:#8b7c70; --shadow:0 22px 60px rgba(72,53,35,.13); } html[data-accent="violet"]{--accent:#A45F72;--accent-2:#7D536A;--accent-rgb:141,108,255;--accent2-rgb:109,82,217} html[data-accent="cyan"]{--accent:#18c8ff;--accent-2:#5d7cff;--accent-rgb:24,200,255;--accent2-rgb:93,124,255} html[data-accent="blue"]{--accent:#4f7cff;--accent-2:#8b5cf6;--accent-rgb:79,124,255;--accent2-rgb:139,92,246} html[data-accent="indigo"]{--accent:#6f72ff;--accent-2:#4f46e5;--accent-rgb:111,114,255;--accent2-rgb:79,70,229} html[data-accent="emerald"]{--accent:#2bcf9f;--accent-2:#3b82f6;--accent-rgb:43,207,159;--accent2-rgb:59,130,246} html[data-accent="teal"]{--accent:#20c6b7;--accent-2:#0f9f96;--accent-rgb:32,198,183;--accent2-rgb:15,159,150} html[data-accent="amber"]{--accent:#f6b94b;--accent-2:#f47a5b;--accent-rgb:246,185,75;--accent2-rgb:244,122,91} html[data-accent="orange"]{--accent:#ff8a3d;--accent-2:#ea580c;--accent-rgb:255,138,61;--accent2-rgb:234,88,12} html[data-accent="rose"]{--accent:#f05a8d;--accent-2:#a855f7;--accent-rgb:240,90,141;--accent2-rgb:168,85,247} html[data-accent="pink"]{--accent:#f56bb0;--accent-2:#db2777;--accent-rgb:245,107,176;--accent2-rgb:219,39,119} *{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden} button,input,textarea,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .app-shell{display:grid;grid-template-columns:var(--sidebar) 1fr;height:100vh}.sidebar{background:var(--sidebar-bg);border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;min-width:0;overflow:hidden}.sidebar-top{min-height:0;display:flex;flex-direction:column} .brand-row{height:72px;display:flex;align-items:center;gap:11px;padding:0 16px}.brand-mark,.hero-logo{display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#FFFDF8;font-weight:800;box-shadow:0 8px 24px rgba(var(--accent-rgb),.22)}.brand-mark{width:34px;height:34px;font-size:15px}.brand-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.brand-copy strong{font-size:13px;letter-spacing:.08em}.brand-copy span{font-size:10px;color:var(--muted)}.mobile-close{display:none;margin-left:auto} .icon-btn{border:0;background:transparent;width:34px;height:34px;border-radius:9px;cursor:pointer;color:var(--muted)}.icon-btn:hover{background:var(--panel-2);color:var(--text)} .search-box{height:40px;margin:2px 12px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);display:flex;align-items:center;padding:0 10px;gap:8px}.search-box svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round}.search-box input{border:0;outline:0;background:transparent;color:var(--text);min-width:0;flex:1;font-size:13px}.search-box input::placeholder{color:var(--muted-2)}kbd{font-size:10px;color:var(--muted-2);border:1px solid var(--line);background:var(--panel-3);padding:2px 6px;border-radius:5px} .primary-nav{padding:0 8px 4px}.nav-item{width:100%;display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--text);cursor:pointer;text-align:left;font-size:13px;font-weight:500}.nav-item:hover,.nav-item.active{background:var(--hover)}.nav-icon{width:20px;display:inline-grid;place-items:center;color:var(--muted);font-size:16px;flex:0 0 20px}.nav-badge{margin-left:auto;min-width:20px;height:20px;border-radius:10px;padding:0 6px;display:grid;place-items:center;background:var(--accent);color:#FFFDF8;font-size:9px;font-weight:700} .history-section{min-height:0;display:flex;flex-direction:column;flex:1;padding:2px 8px 0}.history-heading{width:100%;height:38px;border:0;background:transparent;color:var(--text);display:flex;align-items:center;justify-content:space-between;padding:0 10px;cursor:pointer;border-radius:8px;font-size:13px;font-weight:600}.history-heading:hover{background:var(--hover)}.history-heading-left{display:flex;align-items:center;gap:10px}.history-content{min-height:0;overflow-y:auto;padding-bottom:12px}.history-content::-webkit-scrollbar{width:6px}.history-content::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}.history-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;align-items:center;min-height:36px;padding:4px 5px 4px 10px;border-radius:8px}.history-row:hover{background:var(--hover)}.history-row.active{background:var(--active)}.history-open{min-width:0;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer;padding:5px 0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-actions{display:flex;align-items:center;gap:1px;opacity:0}.history-row:hover .history-actions,.history-row.pinned .history-actions{opacity:1}.history-action{width:27px;height:27px;border:0;border-radius:7px;background:transparent;cursor:pointer;color:var(--muted);font-size:13px}.history-action:hover{background:var(--panel-3);color:var(--text)}.history-action.pin.active{color:var(--accent)}.history-empty{color:var(--muted-2);padding:18px 10px;font-size:12px}.sidebar-bottom{border-top:1px solid var(--line);padding:9px 8px 11px}.settings-button{height:42px} .main-panel{min-width:0;display:flex;flex-direction:column;background:var(--bg);position:relative}.topbar{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px 0 22px;background:var(--bg)}.topbar-left{display:flex;align-items:center;gap:10px}.menu-button{display:none}.chat-title-wrap{display:flex;flex-direction:column;gap:1px}.chat-title-wrap strong{font-size:13px}.subtitle-line{font-size:10px;color:var(--muted-2);display:flex;align-items:center;gap:5px}.status-dot{width:6px;height:6px;border-radius:50%;background:#777;display:inline-block}.status-dot.online{background:#41d39f;box-shadow:0 0 0 3px rgba(65,211,159,.08)}.status-dot.offline{background:#ff647c} .user-chip{border:0;background:transparent;display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:10px;cursor:pointer}.user-chip:hover{background:var(--hover)}.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-2);color:#FFFDF8;display:grid;place-items:center;font-size:12px;font-weight:700}.user-chip-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1px}.user-chip-copy strong{font-size:11px;font-weight:600}.user-chip-copy small{font-size:9px;color:var(--muted)}.chevron{font-size:10px;color:var(--muted-2)} .view{display:none;flex:1;min-height:0;overflow:hidden}.view.active-view{display:flex;flex-direction:column}.chat-stage{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:30px 24px 24px;scrollbar-gutter:stable}.welcome{min-height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:760px;margin:0 auto}.hero-logo{width:54px;height:54px;border-radius:17px;font-size:22px;margin-bottom:20px}.welcome h1{font-size:30px;letter-spacing:-.03em;margin:0 0 8px}.welcome p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}.conversation{max-width:var(--chat-width);margin:0 auto}.message{display:flex;margin:0 0 26px}.message.user{justify-content:flex-end}.bubble{max-width:min(720px,86%);border-radius:16px;padding:13px 15px;font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}.message.user .bubble{background:var(--panel-3)}.message.assistant .bubble{background:transparent;padding-left:0}.message.assistant .bubble::before{content:"ULTRON";display:block;font-size:10px;color:var(--accent);font-weight:700;letter-spacing:.08em;margin-bottom:7px}.message.error .bubble{color:#ff8d9e} .composer-wrap{position:relative;flex:0 0 auto;z-index:5;width:100%;padding:12px 24px 10px;background:linear-gradient(180deg,rgba(247,242,240,0),var(--bg) 22%)}.composer{max-width:var(--composer-width);margin:0 auto;min-height:58px;border:1px solid var(--line-strong);background:var(--surface-2);border-radius:18px;padding:9px 10px;display:flex;align-items:flex-end;gap:6px;box-shadow:0 8px 35px rgba(105,78,68,.12)}.composer:focus-within{border-color:rgba(var(--accent-rgb),.7)}.composer textarea{flex:1;min-width:0;min-height:38px;max-height:120px;overflow-y:auto;overscroll-behavior:contain;resize:none;border:0;outline:0;background:transparent;color:var(--text);padding:9px 4px;font-size:14px;line-height:20px;scrollbar-width:thin}.composer textarea::-webkit-scrollbar{width:5px}.composer textarea::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:10px}.composer-tool,.send-button,.mode-chip{flex:0 0 auto}.composer textarea::placeholder{color:var(--muted-2)}.composer-tool{width:38px;height:38px;border-radius:11px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:17px}.composer-tool:hover{background:var(--panel-3);color:var(--text)}.composer-tool.listening{color:#ff647c;background:rgba(255,100,124,.08)}.send-button{width:38px;height:38px;border-radius:50%;border:0;background:var(--text);color:var(--bg);cursor:pointer;font-weight:800;font-size:18px}.send-button:disabled{opacity:.45;cursor:not-allowed}.mode-chip{height:28px;align-self:center;border:1px solid rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.08);color:var(--accent);padding:0 8px;border-radius:8px;font-size:9px;display:grid;place-items:center;white-space:nowrap}.footer-note{text-align:center;font-size:9.5px;color:var(--muted-2);margin:7px 0 0}.attachment-chip{max-width:var(--composer-width);margin:0 auto 6px;display:flex;align-items:center;justify-content:space-between;gap:8px;width:max-content;max-width:min(var(--composer-width),90vw);border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:6px 8px 6px 10px;font-size:10px;color:var(--muted)}.attachment-chip button{border:0;background:transparent;color:var(--muted);cursor:pointer} .content-page{width:100%;height:100%;overflow-y:auto;padding:44px}.page-heading{max-width:1100px;margin:0 auto 28px;display:flex;justify-content:space-between;gap:24px;align-items:flex-end}.eyebrow{font-size:10px;letter-spacing:.13em;color:var(--accent);font-weight:700}.page-heading h2,.modal-header h2{margin:6px 0 6px;font-size:28px;letter-spacing:-.03em}.page-heading p,.modal-header p,.settings-section p{color:var(--muted);margin:0;line-height:1.6;font-size:13px}.primary-button,.secondary-button{border-radius:9px;height:38px;padding:0 14px;font-size:12px;font-weight:600;cursor:pointer}.primary-button{border:1px solid var(--accent);background:var(--accent-2);color:#FFFDF8}.primary-button:hover{filter:brightness(1.08)}.secondary-button{border:1px solid var(--line);background:var(--surface-2);color:var(--text)}.list-panel{max-width:1100px;margin:0 auto;display:grid;gap:9px}.empty-card{max-width:1100px;margin:0 auto;border:1px dashed var(--line-strong);border-radius:16px;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:7px;background:var(--surface-3)}.empty-card strong{color:var(--text);font-size:14px}.empty-card span{font-size:12px}.empty-icon{font-size:26px;color:var(--accent)} .settings-page{padding-bottom:80px;min-height:0;overflow-y:auto;overscroll-behavior:contain}.settings-layout{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:220px minmax(0,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden;height:calc(100vh - 205px);min-height:430px;background:var(--surface-3)}.settings-nav{padding:10px;border-right:1px solid var(--line);background:var(--sidebar-bg);min-height:0;overflow-y:auto;overscroll-behavior:contain}.settings-detail{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.settings-nav-item{width:100%;min-height:36px;border:0;background:transparent;color:var(--muted);border-radius:8px;padding:8px 10px;text-align:left;cursor:pointer;font-size:12px}.settings-nav-item:hover,.settings-nav-item.active{background:var(--hover);color:var(--text)}.settings-detail{padding:28px}.settings-section{display:none}.settings-section.active{display:block}.settings-section h3{margin:0 0 7px;font-size:18px}.settings-section-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}.settings-subhead{margin:24px 0 10px;font-size:11px;font-weight:700;color:var(--text);letter-spacing:.03em}.setting-card{border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px;display:flex;justify-content:space-between;gap:20px;background:var(--surface)}.setting-card strong{font-size:12px}.setting-card span{font-size:11px;color:var(--muted);text-align:right}.users-list{display:grid;gap:9px}.user-row{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:13px;display:flex;align-items:center;justify-content:space-between;gap:10px}.user-row-main{display:flex;align-items:center;gap:10px;min-width:0}.user-row-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-2);color:#FFFDF8;display:grid;place-items:center;font-weight:700;font-size:12px;flex:0 0 34px}.user-row-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.user-row-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-row-copy span{font-size:10px;color:var(--muted)}.user-row-actions{display:flex;gap:6px}.small-button{height:30px;border:1px solid var(--line);border-radius:8px;background:var(--panel-3);color:var(--text);padding:0 10px;font-size:10px;cursor:pointer}.small-button.active{border-color:var(--accent);color:var(--accent)}.small-button.danger:hover{border-color:#ff647c;color:#ff647c} .theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.theme-grid button{min-height:74px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:12px;cursor:pointer}.theme-grid button.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.08)}.theme-grid span{font-size:12px;font-weight:700}.theme-grid small{font-size:10px;color:var(--muted)}.accent-grid{display:flex;flex-wrap:wrap;gap:10px}.accent-grid button{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--surface);display:grid;place-items:center;cursor:pointer}.accent-grid button.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.1)}.accent-grid button span{width:20px;height:20px;border-radius:50%}.accent-grid [data-accent-choice="violet"] span{background:linear-gradient(135deg,#A45F72,#7D536A)}.accent-grid [data-accent-choice="cyan"] span{background:linear-gradient(135deg,#18c8ff,#5d7cff)}.accent-grid [data-accent-choice="blue"] span{background:linear-gradient(135deg,#4f7cff,#8b5cf6)}.accent-grid [data-accent-choice="emerald"] span{background:linear-gradient(135deg,#2bcf9f,#3b82f6)}.accent-grid [data-accent-choice="amber"] span{background:linear-gradient(135deg,#f6b94b,#f47a5b)}.accent-grid [data-accent-choice="rose"] span{background:linear-gradient(135deg,#f05a8d,#a855f7)}.accent-grid [data-accent-choice="indigo"] span{background:linear-gradient(135deg,#6f72ff,#4f46e5)}.accent-grid [data-accent-choice="teal"] span{background:linear-gradient(135deg,#20c6b7,#0f9f96)}.accent-grid [data-accent-choice="orange"] span{background:linear-gradient(135deg,#ff8a3d,#ea580c)}.accent-grid [data-accent-choice="pink"] span{background:linear-gradient(135deg,#f56bb0,#db2777)} .template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.template-grid button{min-height:72px;border:1px solid var(--line);border-radius:12px;background:var(--surface);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:12px;cursor:pointer;color:var(--text);text-align:left}.template-grid button:hover{background:var(--hover)}.template-grid button.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.08)}.template-grid span{font-size:12px;font-weight:700}.template-grid small{font-size:10px;color:var(--muted);line-height:1.35}.appearance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.customize-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:15px;display:flex;flex-direction:column;gap:8px}.customize-card>span{font-size:12px;font-weight:650;color:var(--text)}.customize-card select{width:100%;height:38px;border:1px solid var(--line-strong);border-radius:9px;background:var(--bg);color:var(--text);padding:0 10px;outline:0}.customize-card small{font-size:10px;line-height:1.45;color:var(--muted)}.appearance-footer{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px 15px;display:flex;align-items:center;justify-content:space-between;gap:18px}.appearance-footer>div{display:flex;flex-direction:column;gap:3px}.appearance-footer strong{font-size:11px}.appearance-footer span{font-size:10px;color:var(--muted)}.feature-panel .feature-open{margin-top:20px}.system-grid{display:grid;gap:8px} .messages-page{padding-bottom:34px}.messages-layout{max-width:1100px;margin:0 auto;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:280px minmax(0,1fr);height:min(620px,calc(100vh - 230px));background:var(--surface-3)}.threads-panel{border-right:1px solid var(--line);min-width:0;display:flex;flex-direction:column}.threads-head{height:50px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 14px;font-size:11px;font-weight:700}.threads-list{overflow-y:auto;padding:8px}.thread-item{width:100%;border:0;background:transparent;border-radius:10px;padding:10px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}.thread-item:hover,.thread-item.active{background:var(--hover)}.thread-item-copy{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}.thread-item-copy strong{font-size:11px}.thread-item-copy span{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread-dot{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#FFFDF8;display:grid;place-items:center;font-size:8px;font-weight:700}.thread-panel{min-width:0;min-height:0}.thread-empty{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:var(--muted)}.thread-empty strong{color:var(--text)}.thread-empty span{font-size:11px}.thread-active{height:100%;display:grid;grid-template-rows:58px minmax(0,1fr) 64px}.thread-head{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line)}.thread-head>div:last-child{display:flex;flex-direction:column;gap:2px}.thread-head strong{font-size:12px}.thread-head span{font-size:9px;color:var(--muted)}.thread-messages{overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}.dm{max-width:72%;padding:9px 11px;border-radius:12px;background:var(--panel-2);font-size:12px;line-height:1.45}.dm.mine{align-self:flex-end;background:rgba(var(--accent-rgb),.16);border:1px solid rgba(var(--accent-rgb),.18)}.dm small{display:block;margin-top:4px;font-size:8px;color:var(--muted)}.thread-composer{border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:10px 12px}.thread-composer input{flex:1;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);padding:0 11px;outline:0} .reminder-row.done{opacity:.62}.reminder-row .user-row-copy strong{text-decoration:none}.reminder-row.done .user-row-copy strong{text-decoration:line-through} .popover{position:fixed;z-index:40;min-width:170px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:6px;box-shadow:var(--shadow)}.user-popover{right:18px;top:58px}.popover button{width:100%;height:34px;border:0;background:transparent;color:var(--text);border-radius:7px;text-align:left;padding:0 10px;cursor:pointer;font-size:11px}.popover button:hover{background:var(--hover)} .modal-backdrop{position:fixed;inset:0;z-index:60;background:rgba(104,76,68,.26);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px}.modal-card{width:min(440px,100%);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:17px;padding:22px;box-shadow:var(--shadow)}.modal-header{display:flex;justify-content:space-between;gap:20px;margin-bottom:20px}.modal-header h2{font-size:22px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}.field span{font-size:11px;color:var(--muted);font-weight:600}.field input,.field select,.field textarea{border-radius:9px;border:1px solid var(--line-strong);background:var(--bg);color:var(--text);padding:0 11px;outline:0}.field input,.field select{height:42px}.field textarea{padding:10px 11px;resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px} .toast{position:fixed;z-index:90;left:50%;bottom:20px;transform:translateX(-50%);background:var(--text);color:var(--bg);border-radius:9px;padding:9px 13px;font-size:10px;box-shadow:var(--shadow)} [hidden]{display:none!important} body[data-ui-sidebar="compact"]{--sidebar:260px}body[data-ui-sidebar="standard"]{--sidebar:292px}body[data-ui-sidebar="wide"]{--sidebar:324px}body[data-ui-chat-width="focused"]{--chat-width:700px;--composer-width:700px}body[data-ui-chat-width="standard"]{--chat-width:820px;--composer-width:780px}body[data-ui-chat-width="wide"]{--chat-width:980px;--composer-width:920px} body[data-ui-density="compact"] .brand-row{height:62px}body[data-ui-density="compact"] .nav-item{height:36px}body[data-ui-density="compact"] .history-heading{height:34px}body[data-ui-density="compact"] .history-row{min-height:32px}body[data-ui-density="compact"] .sidebar-bottom{padding-top:6px;padding-bottom:7px}body[data-ui-density="compact"] .topbar{height:58px} body[data-ui-corners="subtle"] :is(.search-box,.nav-item,.history-heading,.history-row,.composer,.settings-layout,.setting-card,.customize-card,.appearance-footer,.messages-layout,.modal-card){border-radius:7px}body[data-ui-corners="round"] :is(.search-box,.nav-item,.history-heading,.history-row,.composer,.settings-layout,.setting-card,.customize-card,.appearance-footer,.messages-layout,.modal-card){border-radius:18px} body[data-ui-font-size="small"] .bubble{font-size:13px}body[data-ui-font-size="small"] .composer textarea{font-size:13px}body[data-ui-font-size="small"] .nav-item,body[data-ui-font-size="small"] .history-heading{font-size:12px}body[data-ui-font-size="large"] .bubble{font-size:15.5px}body[data-ui-font-size="large"] .composer textarea{font-size:15px}body[data-ui-font-size="large"] .nav-item,body[data-ui-font-size="large"] .history-heading{font-size:14px}body[data-ui-font-size="large"] .welcome h1{font-size:33px} body[data-ui-message-style="bubbles"] .message.assistant .bubble{background:var(--surface-2);padding:13px 15px}body[data-ui-message-style="cards"] .bubble{border:1px solid var(--line);background:var(--surface-2);box-shadow:0 8px 28px rgba(0,0,0,.08)}body[data-ui-message-style="cards"] .message.assistant .bubble{padding:13px 15px} body[data-ui-composer-style="docked"] .composer-wrap{padding:11px 24px 12px;background:var(--bg);border-top:1px solid var(--line)}body[data-ui-composer-style="docked"] .composer{max-width:var(--chat-width);border-radius:12px;box-shadow:none}body[data-ui-composer-style="compact"] .composer-wrap{padding-top:10px}body[data-ui-composer-style="compact"] .composer{min-height:48px;border-radius:12px;padding:5px 7px}body[data-ui-composer-style="compact"] .composer textarea{min-height:34px;padding:7px 4px}body[data-ui-composer-style="compact"] .composer-tool,body[data-ui-composer-style="compact"] .send-button{width:34px;height:34px} .settings-nav::-webkit-scrollbar,.settings-detail::-webkit-scrollbar{width:7px}.settings-nav::-webkit-scrollbar-thumb,.settings-detail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px}.settings-nav::-webkit-scrollbar-track,.settings-detail::-webkit-scrollbar-track{background:transparent} @media(max-width:820px){:root{--sidebar:280px}.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;z-index:50;left:0;top:0;bottom:0;width:var(--sidebar);transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.mobile-close,.menu-button{display:inline-grid;place-items:center}.user-chip-copy,.chevron{display:none}.content-page{padding:26px 16px}.page-heading{align-items:flex-start;flex-direction:column}.settings-layout{grid-template-columns:1fr;height:auto;min-height:0;overflow:visible}.settings-nav{border-right:0;border-bottom:1px solid var(--line);display:flex;overflow-x:auto;overflow-y:hidden}.settings-nav-item{width:auto;white-space:nowrap}.settings-detail{padding:20px;overflow:visible}.appearance-grid,.theme-grid,.template-grid{grid-template-columns:1fr}.appearance-footer{align-items:flex-start;flex-direction:column}.messages-layout{grid-template-columns:1fr;height:auto;min-height:560px}.threads-panel{border-right:0;border-bottom:1px solid var(--line);max-height:190px}.thread-panel{min-height:360px}.chat-stage{padding-left:16px;padding-right:16px}.composer-wrap{padding-left:12px;padding-right:12px}} /* V3.1 optional account authentication */ .auth-card { max-width: 520px; } .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin: 4px 0 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .auth-tab { border: 0; border-radius: 10px; padding: 10px 12px; background: transparent; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; } .auth-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 8px rgba(0,0,0,.12); } .auth-form[hidden] { display: none !important; } .auth-note { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.5; } .account-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .account-card-main { display: flex; align-items: center; gap: 12px; min-width: 0; } .account-card-copy { display: grid; gap: 3px; min-width: 0; } .account-card-copy strong, .account-card-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-card-copy span { color: var(--muted); font-size: 13px; } .account-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .guest-card { padding: 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); display: grid; gap: 7px; } .guest-card span { color: var(--muted); line-height: 1.55; } @media (max-width: 640px) { .account-card { align-items: flex-start; flex-direction: column; } .account-actions { width: 100%; justify-content: stretch; } .account-actions button { flex: 1; } } .feature-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; } .feature-actions .primary-button, .feature-actions .secondary-button { width:auto; } /* ============================================================ V3.3.2 — LONG CONVERSATION / COMPOSER LAYOUT LOCK ------------------------------------------------------------ Keep the application itself locked to the viewport. Inside Chat, only .chat-stage is allowed to scroll. The composer owns its own bottom grid row and can never be pushed below the viewport by a long conversation or input. ============================================================ */ html, body { width: 100%; height: 100%; min-height: 0; overflow: hidden; } .app-shell { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; } .main-panel { height: 100%; min-height: 0; overflow: hidden; } .topbar { flex: 0 0 auto; } /* The active chat view is exactly the remaining main-panel space. */ #chatView.active-view { flex: 1 1 0; height: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; } /* This is the only scrolling region in the main chat. */ #chatView .chat-stage { min-width: 0; min-height: 0; height: auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; } /* Composer is a real non-scrolling grid row, not an overlay. */ #chatView .composer-wrap { position: relative; inset: auto; min-width: 0; min-height: 0; flex: none; overflow: visible; } /* Long typed text scrolls inside this box; it cannot grow the page. */ #chatView .composer textarea { min-height: 38px; max-height: 120px; overflow-y: auto; } /* ULTRON REAL THEMES V3 START */ /* Real ULTRON theme system. No black. No blue. No dark-blue. Existing layout is untouched. */ /* ============================================== PEARL LAVENDER ============================================== */ html[data-theme="pearl-lavender"] { --bg:#F7F2F5; --sidebar-bg:#FFF9FC; --panel:#FFFDFB; --panel-2:#F5EBF1; --panel-3:#EFE3EB; --surface:#FFF9FC; --surface-2:#FFFDFB; --surface-3:#F8EEF3; --hover:#F2E4EB; --active:#EAD8E2; --line:#DDCFD7; --line-strong:#CEBBC6; --text:#493B43; --muted:#806D78; --muted-2:#A18E98; --accent:#95657F; --accent-2:#7E536B; --accent-rgb:149,101,127; --accent2-rgb:126,83,107; } /* ============================================== WARM IVORY ============================================== */ html[data-theme="warm-ivory"] { --bg:#F8F3E9; --sidebar-bg:#FFFAF2; --panel:#FFFDF8; --panel-2:#F7EBDD; --panel-3:#F3E4D3; --surface:#FFF8ED; --surface-2:#FFFDF8; --surface-3:#FFF4E5; --hover:#F3E4D3; --active:#EBD6BD; --line:#DFCDB9; --line-strong:#CEB89F; --text:#4A3B31; --muted:#806F62; --muted-2:#A08D7E; --accent:#B8783E; --accent-2:#976032; --accent-rgb:184,120,62; --accent2-rgb:151,96,50; } /* ============================================== CHAMPAGNE ============================================== */ html[data-theme="champagne"] { --bg:#F7F2E7; --sidebar-bg:#FCF7EC; --panel:#FFFDF7; --panel-2:#F5EBD7; --panel-3:#EEE0C5; --surface:#FBF4E6; --surface-2:#FFFDF7; --surface-3:#FAEFD8; --hover:#EEE1C8; --active:#E6D3AE; --line:#DCC6A0; --line-strong:#CBB185; --text:#493D2F; --muted:#80715C; --muted-2:#A18F72; --accent:#A77A3F; --accent-2:#88622F; --accent-rgb:167,122,63; --accent2-rgb:136,98,47; } /* ============================================== SAGE MIST ============================================== */ html[data-theme="sage-mist"] { --bg:#F1F4ED; --sidebar-bg:#F8FAF5; --panel:#FBFCF8; --panel-2:#EAF0E5; --panel-3:#E2E9DB; --surface:#F6F9F2; --surface-2:#FBFCF8; --surface-3:#EEF4E9; --hover:#E3EADC; --active:#D7E1CF; --line:#CBD6C2; --line-strong:#B8C7AE; --text:#394238; --muted:#6E786A; --muted-2:#8D9788; --accent:#728866; --accent-2:#5E7353; --accent-rgb:114,136,102; --accent2-rgb:94,115,83; } /* ============================================== MINT PEARL ============================================== */ html[data-theme="mint-pearl"] { --bg:#F0F6F1; --sidebar-bg:#F8FBF8; --panel:#FBFDFB; --panel-2:#E7F1E9; --panel-3:#DDEBE1; --surface:#F4F9F5; --surface-2:#FBFDFB; --surface-3:#EAF4ED; --hover:#DFECE3; --active:#D2E4D7; --line:#C5D8CA; --line-strong:#AFC9B6; --text:#35443A; --muted:#6B7D70; --muted-2:#87998C; --accent:#5C886B; --accent-2:#477356; --accent-rgb:92,136,107; --accent2-rgb:71,115,86; } /* ============================================== ROSE QUARTZ ============================================== */ html[data-theme="rose-quartz"] { --bg:#FAF2F4; --sidebar-bg:#FFF8FA; --panel:#FFF9FA; --panel-2:#F7E6EA; --panel-3:#F1DDE2; --surface:#FFF5F7; --surface-2:#FFF9FA; --surface-3:#F8E9ED; --hover:#F1DEE3; --active:#E8CDD4; --line:#E1C7CE; --line-strong:#D2B2BB; --text:#4D383E; --muted:#826C73; --muted-2:#A18991; --accent:#AD6679; --accent-2:#915165; --accent-rgb:173,102,121; --accent2-rgb:145,81,101; } /* ============================================== PEACH CREAM ============================================== */ html[data-theme="peach-cream"] { --bg:#FFF3E9; --sidebar-bg:#FFF8F1; --panel:#FFF9F4; --panel-2:#FAE7D9; --panel-3:#F5DCCB; --surface:#FFF5EC; --surface-2:#FFF9F4; --surface-3:#FCE9DC; --hover:#F4DCCB; --active:#EDCCB6; --line:#E4C7B3; --line-strong:#D4AE96; --text:#4E3A30; --muted:#846E62; --muted-2:#A58A7C; --accent:#C27655; --accent-2:#A45E41; --accent-rgb:194,118,85; --accent2-rgb:164,94,65; } /* ============================================== TERRACOTTA ============================================== */ html[data-theme="terracotta"] { --bg:#F8EFEA; --sidebar-bg:#FCF5F1; --panel:#FFF9F6; --panel-2:#F1E1D8; --panel-3:#EBD7CC; --surface:#FAEEE8; --surface-2:#FFF9F6; --surface-3:#F5E5DD; --hover:#EAD6CC; --active:#DEC3B6; --line:#DCC1B4; --line-strong:#CAA898; --text:#4B3831; --muted:#80685E; --muted-2:#9F8478; --accent:#B7684E; --accent-2:#98513B; --accent-rgb:183,104,78; --accent2-rgb:152,81,59; } /* ============================================== MAUVE ============================================== */ html[data-theme="mauve"] { --bg:#F6F0F3; --sidebar-bg:#FCF7FA; --panel:#FFFAFC; --panel-2:#F0E4EA; --panel-3:#E9DAE2; --surface:#F9F0F5; --surface-2:#FFFAFC; --surface-3:#F3E8EE; --hover:#EADCE3; --active:#DECBD5; --line:#D8C5CF; --line-strong:#C7AFBB; --text:#493940; --muted:#7E6973; --muted-2:#9C858F; --accent:#936579; --accent-2:#785064; --accent-rgb:147,101,121; --accent2-rgb:120,80,100; } /* ============================================== PLUM PEARL ============================================== */ html[data-theme="plum-pearl"] { --bg:#F5F0F4; --sidebar-bg:#FAF6F9; --panel:#FCF9FB; --panel-2:#ECE2E9; --panel-3:#E6D9E3; --surface:#F8F1F6; --surface-2:#FCF9FB; --surface-3:#F0E6ED; --hover:#E5D8E1; --active:#D9C7D3; --line:#D3C2CE; --line-strong:#BFA9B8; --text:#46373F; --muted:#77656E; --muted-2:#95818B; --accent:#805A70; --accent-2:#68465A; --accent-rgb:128,90,112; --accent2-rgb:104,70,90; } /* ============================================== HONEY CREAM ============================================== */ html[data-theme="honey-cream"] { --bg:#FCF5E7; --sidebar-bg:#FFF9EC; --panel:#FFFDF7; --panel-2:#F8ECCF; --panel-3:#F3E3BE; --surface:#FFF7E6; --surface-2:#FFFDF7; --surface-3:#F9EDCF; --hover:#F1E1BA; --active:#E7D19F; --line:#E2C990; --line-strong:#CFB36D; --text:#4C402D; --muted:#817157; --muted-2:#9F8A67; --accent:#B88935; --accent-2:#986D25; --accent-rgb:184,137,53; --accent2-rgb:152,109,37; } /* ============================================== OLIVE MIST ============================================== */ html[data-theme="olive-mist"] { --bg:#F3F3EA; --sidebar-bg:#FAFAF3; --panel:#FCFCF7; --panel-2:#EBEBDE; --panel-3:#E5E5D3; --surface:#F8F8EF; --surface-2:#FCFCF7; --surface-3:#EFEFDF; --hover:#E4E4D1; --active:#D8D8BE; --line:#D2D2BC; --line-strong:#BDBD9E; --text:#414234; --muted:#73745F; --muted-2:#90917A; --accent:#7E8053; --accent-2:#65673F; --accent-rgb:126,128,83; --accent2-rgb:101,103,63; } /* ============================================== CORAL PEARL ============================================== */ html[data-theme="coral-pearl"] { --bg:#FCF1ED; --sidebar-bg:#FFF7F4; --panel:#FFF9F7; --panel-2:#F6E2DB; --panel-3:#F1D8CF; --surface:#FFF3EF; --surface-2:#FFF9F7; --surface-3:#F8E5DF; --hover:#EFD8D0; --active:#E5C7BD; --line:#E2C4BA; --line-strong:#D1AA9E; --text:#4C3934; --muted:#826C65; --muted-2:#A18982; --accent:#BF715F; --accent-2:#9F5848; --accent-rgb:191,113,95; --accent2-rgb:159,88,72; } /* ============================================== BURGUNDY PEARL ============================================== */ html[data-theme="burgundy-pearl"] { --bg:#F7F1F2; --sidebar-bg:#FCF7F8; --panel:#FFF9FA; --panel-2:#F0E2E4; --panel-3:#E9DADC; --surface:#F9F0F2; --surface-2:#FFF9FA; --surface-3:#F3E7E9; --hover:#E8D9DC; --active:#DCC7CB; --line:#D8C4C7; --line-strong:#C4AAAF; --text:#49383A; --muted:#796568; --muted-2:#968084; --accent:#87515D; --accent-2:#6D3F49; --accent-rgb:135,81,93; --accent2-rgb:109,63,73; } /* ============================================== SAND STONE ============================================== */ html[data-theme="sand-stone"] { --bg:#F6F1E7; --sidebar-bg:#FCF8F0; --panel:#FFFCF6; --panel-2:#F0E6D7; --panel-3:#E9DDCB; --surface:#FAF3E8; --surface-2:#FFFCF6; --surface-3:#F3E9DA; --hover:#E8DDCC; --active:#DDCDB6; --line:#D8C8AF; --line-strong:#C2AF91; --text:#493F33; --muted:#7D7162; --muted-2:#998B79; --accent:#9A7851; --accent-2:#7D5E3D; --accent-rgb:154,120,81; --accent2-rgb:125,94,61; } /* ============================================== COCOA CREAM ============================================== */ html[data-theme="cocoa-cream"] { --bg:#F7F1EC; --sidebar-bg:#FCF7F3; --panel:#FFFBF7; --panel-2:#F0E3D9; --panel-3:#EADCD1; --surface:#FAF0E9; --surface-2:#FFFBF7; --surface-3:#F4E7DE; --hover:#E8DAD0; --active:#DBC8BC; --line:#D9C5B8; --line-strong:#C5AB9B; --text:#493832; --muted:#79675F; --muted-2:#968179; --accent:#906652; --accent-2:#724D3D; --accent-rgb:144,102,82; --accent2-rgb:114,77,61; } /* ============================================== NON-BLUE ACCENTS ============================================== */ html[data-accent="rose"] { --accent:#A45F72; --accent-2:#844A5C; --accent-rgb:164,95,114; --accent2-rgb:132,74,92; } html[data-accent="terracotta"] { --accent:#B7684E; --accent-2:#95503A; --accent-rgb:183,104,78; --accent2-rgb:149,80,58; } html[data-accent="coral"] { --accent:#BF715F; --accent-2:#9E5848; --accent-rgb:191,113,95; --accent2-rgb:158,88,72; } html[data-accent="amber"] { --accent:#B98535; --accent-2:#956722; --accent-rgb:185,133,53; --accent2-rgb:149,103,34; } html[data-accent="honey"] { --accent:#C09A47; --accent-2:#987629; --accent-rgb:192,154,71; --accent2-rgb:152,118,41; } html[data-accent="olive"] { --accent:#7E8053; --accent-2:#63653E; --accent-rgb:126,128,83; --accent2-rgb:99,101,62; } html[data-accent="sage"] { --accent:#728866; --accent-2:#58704E; --accent-rgb:114,136,102; --accent2-rgb:88,112,78; } html[data-accent="mint"] { --accent:#5C886B; --accent-2:#477354; --accent-rgb:92,136,107; --accent2-rgb:71,115,84; } html[data-accent="mauve"] { --accent:#936579; --accent-2:#764E61; --accent-rgb:147,101,121; --accent2-rgb:118,78,97; } html[data-accent="plum"] { --accent:#805A70; --accent-2:#654457; --accent-rgb:128,90,112; --accent2-rgb:101,68,87; } html[data-accent="burgundy"] { --accent:#87515D; --accent-2:#6B3D47; --accent-rgb:135,81,93; --accent2-rgb:107,61,71; } html[data-accent="caramel"] { --accent:#A77855; --accent-2:#845B3E; --accent-rgb:167,120,85; --accent2-rgb:132,91,62; } html[data-accent="cocoa"] { --accent:#906652; --accent-2:#704B3B; --accent-rgb:144,102,82; --accent2-rgb:112,75,59; } html[data-accent="taupe"] { --accent:#8B756A; --accent-2:#6D5950; --accent-rgb:139,117,106; --accent2-rgb:109,89,80; } /* Accent selector previews */ .accent-grid [data-accent-choice="rose"] span { background:#A45F72; } .accent-grid [data-accent-choice="terracotta"] span { background:#B7684E; } .accent-grid [data-accent-choice="coral"] span { background:#BF715F; } .accent-grid [data-accent-choice="amber"] span { background:#B98535; } .accent-grid [data-accent-choice="honey"] span { background:#C09A47; } .accent-grid [data-accent-choice="olive"] span { background:#7E8053; } .accent-grid [data-accent-choice="sage"] span { background:#728866; } .accent-grid [data-accent-choice="mint"] span { background:#5C886B; } .accent-grid [data-accent-choice="mauve"] span { background:#936579; } .accent-grid [data-accent-choice="plum"] span { background:#805A70; } .accent-grid [data-accent-choice="burgundy"] span { background:#87515D; } .accent-grid [data-accent-choice="caramel"] span { background:#A77855; } .accent-grid [data-accent-choice="cocoa"] span { background:#906652; } .accent-grid [data-accent-choice="taupe"] span { background:#8B756A; } /* User requested logo background to remain independent from theme. */ .brand-mark, .hero-logo { background:transparent !important; box-shadow:none !important; } /* ULTRON REAL THEMES V3 END */ /* ULTRON UI DENSITY CSS V1 START */ /* ============================================== DENSITY SETTING UI ============================================== */ .ultron-density-section { margin-top:24px; } .ultron-density-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px; } .ultron-density-choice { min-height:72px; border: 1px solid var(--line); border-radius:12px; background: var(--surface); color: var(--text); padding:12px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:5px; cursor:pointer; text-align:left; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .ultron-density-choice:hover { background: var(--hover); transform: translateY(-1px); } .ultron-density-choice.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.10); } .ultron-density-choice strong { font-size:12px; color:var(--text); } .ultron-density-choice small { font-size:10px; line-height:1.4; color:var(--muted); } /* ============================================== COMPACT ============================================== */ body[data-ui-density="compact"] .nav-item { height:34px; font-size:12px; } body[data-ui-density="compact"] .history-heading { height:33px; font-size:12px; } body[data-ui-density="compact"] .history-row { min-height:31px; } body[data-ui-density="compact"] .history-open { font-size:11.5px; } body[data-ui-density="compact"] .settings-nav-item { min-height:31px; padding:6px 9px; font-size:11px; } body[data-ui-density="compact"] .settings-detail { padding:22px; } body[data-ui-density="compact"] .setting-card { padding:12px; margin-top:10px; } body[data-ui-density="compact"] .theme-grid, body[data-ui-density="compact"] .template-grid { gap:8px; } body[data-ui-density="compact"] .theme-grid button, body[data-ui-density="compact"] .template-grid button { min-height:62px; padding:10px; } body[data-ui-density="compact"] .customize-card { padding:12px; } body[data-ui-density="compact"] .chat-stage { padding-top:22px; } body[data-ui-density="compact"] .message { margin-bottom:18px; } body[data-ui-density="compact"] .bubble { padding:10px 12px; font-size:13px; line-height:1.48; } body[data-ui-density="compact"] .composer { min-height:52px; padding:7px 8px; } body[data-ui-density="compact"] .composer textarea { min-height:34px; padding-top:7px; padding-bottom:7px; } body[data-ui-density="compact"] .composer-tool, body[data-ui-density="compact"] .send-button { width:34px; height:34px; } /* ============================================== COMFORTABLE Existing ULTRON dimensions remain the default. ============================================== */ body[data-ui-density="comfortable"] { --ultron-density-mode:comfortable; } /* ============================================== SPACIOUS ============================================== */ body[data-ui-density="spacious"] .nav-item { height:46px; font-size:13.5px; } body[data-ui-density="spacious"] .history-heading { height:44px; } body[data-ui-density="spacious"] .history-row { min-height:42px; } body[data-ui-density="spacious"] .history-open { font-size:13px; } body[data-ui-density="spacious"] .settings-nav-item { min-height:42px; padding:10px 12px; font-size:12.5px; } body[data-ui-density="spacious"] .settings-detail { padding:34px; } body[data-ui-density="spacious"] .setting-card { padding:20px; margin-top:18px; } body[data-ui-density="spacious"] .theme-grid, body[data-ui-density="spacious"] .template-grid { gap:13px; } body[data-ui-density="spacious"] .theme-grid button, body[data-ui-density="spacious"] .template-grid button { min-height:86px; padding:15px; } body[data-ui-density="spacious"] .customize-card { padding:19px; } body[data-ui-density="spacious"] .chat-stage { padding-top:38px; padding-left:30px; padding-right:30px; } body[data-ui-density="spacious"] .message { margin-bottom:32px; } body[data-ui-density="spacious"] .bubble { padding:16px 18px; font-size:14.5px; line-height:1.62; } body[data-ui-density="spacious"] .composer { min-height:66px; padding:11px 12px; } body[data-ui-density="spacious"] .composer textarea { min-height:42px; padding-top:11px; padding-bottom:11px; } body[data-ui-density="spacious"] .composer-tool, body[data-ui-density="spacious"] .send-button { width:42px; height:42px; } /* Mobile */ @media(max-width:820px) { .ultron-density-grid { grid-template-columns:1fr; } } /* ULTRON UI DENSITY CSS V1 END */ /* ULTRON SIDEBAR EXACT EDGE CSS V3 START */ /* No visible handle. No visible line. No overlay element. JS directly detects the real sidebar edge. */ body.ultron-sidebar-edge-hot, body.ultron-sidebar-edge-hot * { cursor:col-resize !important; } body[data-ui-sidebar-resizing="true"], body[data-ui-sidebar-resizing="true"] * { cursor:col-resize !important; user-select:none !important; -webkit-user-select:none !important; } /* ============================================== HIDDEN MODE ============================================== */ @media (min-width:821px) { body[data-ui-sidebar-mode="hidden"] .app-shell { grid-template-columns: 0 minmax(0,1fr) !important; } body[data-ui-sidebar-mode="hidden"] .sidebar { width:0 !important; min-width:0 !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; border-right:0 !important; } /* ============================================== COMPACT MODE ============================================== */ body[data-ui-sidebar-mode="compact"] .brand-row { justify-content:center; padding-left:0; padding-right:0; } body[data-ui-sidebar-mode="compact"] .brand-copy, body[data-ui-sidebar-mode="compact"] .mobile-close { display:none !important; } body[data-ui-sidebar-mode="compact"] .search-box { width:42px; height:40px; margin: 2px auto 12px; padding:0; justify-content:center; } body[data-ui-sidebar-mode="compact"] .search-box input, body[data-ui-sidebar-mode="compact"] .search-box kbd { display:none !important; } body[data-ui-sidebar-mode="compact"] .primary-nav { padding-left:8px; padding-right:8px; } body[data-ui-sidebar-mode="compact"] .nav-item { position:relative; justify-content:center; gap:0; padding-left:0; padding-right:0; font-size:0; } body[data-ui-sidebar-mode="compact"] .nav-icon { width:24px; flex:0 0 24px; font-size:16px; } body[data-ui-sidebar-mode="compact"] .nav-badge { position:absolute; right:3px; top:3px; min-width:15px; height:15px; padding:0 4px; font-size:7px; } body[data-ui-sidebar-mode="compact"] .history-section { display:none !important; } body[data-ui-sidebar-mode="compact"] .sidebar-bottom { padding-left:8px; padding-right:8px; } body[data-ui-sidebar-mode="compact"] .sidebar .user-chip-copy, body[data-ui-sidebar-mode="compact"] .sidebar .chevron { display:none !important; } } /* Mobile existing sidebar untouched */ @media (max-width:820px) { body.ultron-sidebar-edge-hot, body.ultron-sidebar-edge-hot * { cursor:auto !important; } } /* ULTRON SIDEBAR EXACT EDGE CSS V3 END */ /* ULTRON MESSAGE STYLE CSS V1 START */ /* ================================================== DENSITY-AWARE MESSAGE SPACING ================================================== */ body { --ultron-user-pad-y:12px; --ultron-user-pad-x:15px; --ultron-ai-pad-y:14px; --ultron-ai-pad-x:16px; --ultron-message-gap:26px; } body[data-ui-density="compact"] { --ultron-user-pad-y:9px; --ultron-user-pad-x:12px; --ultron-ai-pad-y:10px; --ultron-ai-pad-x:12px; --ultron-message-gap:18px; } body[data-ui-density="spacious"] { --ultron-user-pad-y:15px; --ultron-user-pad-x:18px; --ultron-ai-pad-y:18px; --ultron-ai-pad-x:20px; --ultron-message-gap:32px; } /* ================================================== COMMON MESSAGE LAYOUT USER: right aligned bubble ULTRON: full available conversation width ================================================== */ body[data-ultron-message-style] .message { width:100%; box-sizing:border-box; margin-bottom: var(--ultron-message-gap); } /* USER stays right */ body[data-ultron-message-style] .message.user { display:flex; justify-content:flex-end; align-items:flex-start; } body[data-ultron-message-style] .message.user .bubble { width:auto; max-width: min(680px,72%); padding: var(--ultron-user-pad-y) var(--ultron-user-pad-x); box-sizing:border-box; background: rgba( var(--accent-rgb), .13 ) !important; border: 1px solid rgba( var(--accent-rgb), .18 ); color: var(--text); border-radius: 16px 16px 5px 16px; } /* ULTRON gets full content width */ body[data-ultron-message-style] .message.assistant { display:block; width:100%; } body[data-ultron-message-style] .message.assistant .bubble { display:block; width:100%; max-width:none; box-sizing:border-box; color:var(--text); overflow-wrap:anywhere; } /* Existing ULTRON identification becomes clearer */ body[data-ultron-message-style] .message.assistant .bubble::before { content:"ULTRON"; display:block; width:max-content; margin-bottom:9px; color: var(--accent); font-size:10px; font-weight:750; letter-spacing:.10em; } /* Tables / code should use assistant width */ body[data-ultron-message-style] .message.assistant .bubble pre, body[data-ultron-message-style] .message.assistant .bubble table, body[data-ultron-message-style] .message.assistant .bubble .code-block { max-width:100%; } /* ================================================== CLEAN Default / ChatGPT-like No bubble around AI. Full width content. Very subtle differentiation. ================================================== */ body[data-ultron-message-style="clean"] .message.assistant .bubble { padding: var(--ultron-ai-pad-y) 4px calc( var(--ultron-ai-pad-y) + 4px ); border-radius:0; border:0; border-bottom: 1px solid var(--line); background: linear-gradient( 90deg, rgba( var(--accent-rgb), .035 ), transparent 42% ) !important; } /* ================================================== SOFT PANEL Full-width soft neutral panel ================================================== */ body[data-ultron-message-style="soft"] .message.assistant .bubble { padding: var(--ultron-ai-pad-y) var(--ultron-ai-pad-x); background: var(--surface-3) !important; border: 1px solid var(--line); border-left: 3px solid rgba( var(--accent-rgb), .48 ); border-radius:12px; } /* ================================================== CARD Strongest visual separation ================================================== */ body[data-ultron-message-style="card"] .message.assistant .bubble { padding: calc( var(--ultron-ai-pad-y) + 2px ) calc( var(--ultron-ai-pad-x) + 2px ); background: var(--surface-2) !important; border: 1px solid rgba( var(--accent-rgb), .22 ); border-radius:15px; box-shadow: 0 8px 28px rgba( var(--accent-rgb), .055 ); } /* ================================================== SETTINGS CONTROL ================================================== */ .ultron-message-style-section { margin-top:24px; } .ultron-message-style-card { margin-top:10px; } .ultron-message-style-card select { cursor:pointer; } /* ================================================== MOBILE ================================================== */ @media(max-width:820px) { body[data-ultron-message-style] .message.user .bubble { max-width:86%; } body[data-ultron-message-style="clean"] .message.assistant .bubble { padding-left:0; padding-right:0; } } /* ULTRON MESSAGE STYLE CSS V1 END */ /* ULTRON COMPACT CHAT EXPAND START */ /* Full sidebar: existing conversation width remains unchanged. Compact sidebar: conversation automatically uses the space released by the sidebar. */ @media (min-width:821px) { body[data-ui-sidebar-mode="compact"] .conversation { width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; } /* ULTRON reply already uses full conversation width from Message Style V1. Explicitly preserve that behaviour here. */ body[data-ui-sidebar-mode="compact"] .message.assistant { width:100% !important; max-width:none !important; } body[data-ui-sidebar-mode="compact"] .message.assistant .bubble { width:100% !important; max-width:none !important; } /* User message remains right aligned. Do NOT stretch user message. */ body[data-ui-sidebar-mode="compact"] .message.user { width:100% !important; justify-content:flex-end !important; } body[data-ui-sidebar-mode="compact"] .message.user .bubble { width:auto !important; max-width:min(680px,72%) !important; } } /* ULTRON COMPACT CHAT EXPAND END */ /* ULTRON WHITE DEFAULT THEME START */ /* Default for a brand-new ULTRON account. Clean white workspace. No blue / dark-blue / black theme. */ html[data-theme="white"] { --bg:#FFFFFF; --sidebar-bg:#FCFCFA; --panel:#FFFFFF; --panel-2:#F8F8F5; --panel-3:#F3F3EF; --surface:#FFFFFF; --surface-2:#FBFBF9; --surface-3:#F7F7F4; --hover:#F2F2EE; --active:#EBEBE6; --line:#E6E5DF; --line-strong:#D8D6CF; --text:#332E2B; --muted:#746E69; --muted-2:#9C9690; /* Neutral warm accent. Selected Theme Color can override this. */ --accent:#8B756A; --accent-2:#6D5950; --accent-rgb:139,117,106; --accent2-rgb:109,89,80; --shadow: 0 8px 30px rgba(75,65,60,.06); } /* User messages remain identifiable */ html[data-theme="white"] .message.user .bubble { background: #F1EEEB !important; border-color: #DED8D3 !important; } /* Composer stays clean white */ html[data-theme="white"] .composer { background: #FFFFFF; } /* Sidebar stays slightly separated */ html[data-theme="white"] .sidebar { background: #FCFCFA; } /* ULTRON WHITE DEFAULT THEME END */ /* ULTRON AUTH UPGRADE V1 START */ .ultron-known-accounts { margin-bottom:16px; } .ultron-known-title { margin-bottom:8px; font-size:11px; font-weight:700; color:var(--text); } .ultron-known-list { display:grid; gap:7px; } .ultron-known-account { width:100%; min-height:58px; display:grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items:center; gap:10px; border: 1px solid var(--line); border-radius:11px; padding:9px 11px; background: var(--surface); color: var(--text); cursor:pointer; text-align:left; } .ultron-known-account:hover { background: var(--hover); border-color: var(--line-strong); } .ultron-known-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background: var(--accent-2); color:#fff; font-size:11px; font-weight:750; } .ultron-known-copy { min-width:0; display:flex; flex-direction:column; gap:3px; } .ultron-known-copy strong { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ultron-known-copy small { color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ultron-known-arrow { color:var(--muted-2); font-size:18px; } .ultron-auth-divider { display:flex; align-items:center; gap:10px; margin:14px 0 2px; color:var(--muted-2); font-size:9px; } .ultron-auth-divider::before, .ultron-auth-divider::after { content:""; height:1px; flex:1; background:var(--line); } .ultron-auth-help { margin: -5px 0 13px; color: var(--muted); font-size:9.5px; line-height:1.45; } /* ULTRON AUTH UPGRADE V1 END */ /* ULTRON AUTH FLOW V2 START */ /* ================================================ LOGIN / SIGNUP CARD ================================================ */ .ultron-auth-v2-card { width:min(420px,calc(100vw - 32px)); max-height: calc(100vh - 36px); overflow-y:auto; padding:24px; } .ultron-auth-v2-header { margin-bottom:20px; } .ultron-auth-v2-header h2 { margin-top:7px; font-size:25px; line-height:1.15; } .ultron-auth-v2-header p { margin-top:8px; line-height:1.55; } /* Existing internal tabs remain in DOM for compatibility, but user never sees them. */ .ultron-auth-internal-tabs { display:none !important; } /* ================================================ FORMS ================================================ */ .ultron-login-form, .ultron-signup-form { display:flex; flex-direction:column; gap:15px; } .ultron-login-form[hidden], .ultron-signup-form[hidden] { display:none !important; } .ultron-auth-main-button { width:100%; min-height:44px; margin-top:2px; } /* ================================================ EMAIL / MOBILE SIGNUP SWITCH ================================================ */ .ultron-signup-method { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border: 1px solid var(--line); border-radius:12px; background: var(--surface-3); } .ultron-signup-method button { min-height:36px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-weight:650; } .ultron-signup-method button.active { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.05); } /* ================================================ GUEST ================================================ */ .ultron-auth-text-button { align-self:center; border:0; padding:3px 8px; background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:11px; } .ultron-auth-text-button:hover { color:var(--text); } /* ================================================ LOGIN <-> CREATE ACCOUNT ================================================ */ .ultron-auth-bottom { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:4px; padding-top:16px; border-top: 1px solid var(--line); color: var(--muted); font-size:11px; } .ultron-auth-bottom button { border:0; background:transparent; color:var(--accent); cursor:pointer; padding:0; font:inherit; font-weight:700; } .ultron-auth-bottom button:hover { text-decoration:underline; } /* ================================================ SAVED ACCOUNT CHOOSER Only appears when this browser has known accounts. New browser = simple login screen. ================================================ */ .ultron-known-accounts { margin-bottom:3px; } .ultron-known-title { font-size:11px; font-weight:700; margin-bottom:8px; color:var(--text); } /* ================================================ MOBILE ================================================ */ @media(max-width:520px) { .ultron-auth-v2-card { padding:19px; width: calc(100vw - 20px); max-height: calc(100vh - 20px); } .ultron-auth-v2-header h2 { font-size:22px; } } /* ULTRON AUTH FLOW V2 END */ /* ULTRON AUTH SHELL V4 CSS START */ /* Existing internal tab UI stays functional for old app.js but is invisible. */ .ultron-v4-hide-tabs { display:none !important; } .ultron-v4-old-known { display:none !important; } /* Main auth modal */ #authModal .auth-card { width: min( 360px, calc(100vw - 28px) ); max-height: calc(100vh - 30px); overflow-y:auto; padding: 24px 28px 20px; border-radius: 16px; } /* Header closer to screenshot */ #authModal .modal-header { margin-bottom: 18px; } #authModal .modal-header .eyebrow { display:none; } #authModal #authTitle { margin:0; font-size: 22px; font-weight: 650; letter-spacing: -.02em; } #authModal #authSubtitle { margin-top: 8px; font-size: 11px; line-height: 1.45; color: var(--muted); } /* New standalone screens */ .ultron-v4-auth-view { display:flex; flex-direction:column; gap:10px; } .ultron-v4-auth-view[hidden] { display:none !important; } /* Account chooser */ .ultron-v4-account-list { display:flex; flex-direction:column; gap:8px; } .ultron-v4-account-row { width:100%; display:grid; grid-template-columns: 34px minmax(0,1fr) 24px; align-items:center; gap:10px; min-height: 54px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--text); cursor:pointer; text-align:left; } .ultron-v4-account-row:hover { background: var(--hover); border-color: var(--line-strong); } .ultron-v4-account-avatar { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background: var(--accent); color:white; font-size: 10px; font-weight: 700; } .ultron-v4-account-copy { min-width:0; display:flex; flex-direction:column; gap:2px; } .ultron-v4-account-copy strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size: 12px; } .ultron-v4-account-copy small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color: var(--muted); font-size: 9.5px; } .ultron-v4-account-remove { width:22px; height:22px; display:grid; place-items:center; color: var(--muted); border-radius: 50%; } .ultron-v4-account-remove:hover { color: var(--text); background: var(--hover); } /* OR divider */ .ultron-v4-divider { display:flex; align-items:center; gap:10px; margin: 7px 0; color: var(--muted-2); font-size: 9px; } .ultron-v4-divider::before, .ultron-v4-divider::after { content:""; flex:1; height:1px; background: var(--line); } /* Screenshot-style pill buttons */ .ultron-v4-outline-button, .ultron-v4-primary-button { width:100%; min-height: 38px; border-radius: 999px; font:inherit; font-size: 11px; cursor:pointer; } .ultron-v4-outline-button { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); } .ultron-v4-outline-button:hover { background: var(--hover); } .ultron-v4-primary-button { border:0; background: var(--text); color: var(--bg); font-weight: 650; } .ultron-v4-method-button { display:flex; align-items:center; justify-content:center; gap:8px; } .ultron-v4-method-icon { width:16px; display:inline-grid; place-items:center; font-size: 13px; } /* Entry identifier */ .ultron-v4-entry-input { width:100%; min-height: 38px; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 999px; outline:0; padding: 0 13px; background: var(--surface); color: var(--text); font:inherit; } .ultron-v4-entry-input:focus { border-color: var(--accent); } /* Guest */ .ultron-v4-guest-link { align-self:center; border:0; background: transparent; color: var(--muted); padding: 3px 8px; cursor:pointer; font:inherit; font-size: 10px; } .ultron-v4-guest-link:hover { color: var(--text); } /* Bottom links */ .ultron-v4-bottom-link { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px; margin-top: 7px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; } .ultron-v4-bottom-link button { border:0; background: transparent; color: var(--accent); padding:0; cursor:pointer; font:inherit; font-weight: 650; } .ultron-v4-bottom-link button:hover { text-decoration: underline; } .ultron-v4-back-button { margin-right: auto; } /* Signup email/mobile switch */ .ultron-v4-signup-switch { display:grid; grid-template-columns: 1fr 1fr; gap:4px; padding:4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-3); } .ultron-v4-signup-switch button { min-height: 34px; border:0; border-radius: 999px; background: transparent; color: var(--muted); cursor:pointer; font:inherit; font-size: 10.5px; font-weight: 650; } .ultron-v4-signup-switch button.active { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.055); } /* Current working forms remain owner; only visual cleanup */ #authModal #loginForm, #authModal #signupForm { gap: 12px; } #authModal #loginForm[hidden], #authModal #signupForm[hidden] { display:none !important; } #authModal .modal-actions { margin-top: 4px; } /* Keep existing real Login/Create buttons */ #authModal .modal-actions .primary-button { border-radius: 999px; } /* Existing guest button becomes subtle */ #authModal .modal-actions #continueGuestLogin, #authModal .modal-actions #continueGuestSignup { border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); } /* Mobile */ @media(max-width:520px) { #authModal .auth-card { width: calc(100vw - 20px); padding: 21px 20px 18px; } } /* ULTRON AUTH SHELL V4 CSS END */ /* ULTRON PREMIUM AUTH V5 START */ /* ================================================== FULL AUTH EXPERIENCE ================================================== */ #authModal { background: rgba(32,28,26,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ================================================== AUTH CARD ================================================== */ #authModal .auth-card { width: min( 390px, calc(100vw - 28px) ) !important; max-height: calc(100vh - 32px); overflow-y:auto; padding: 30px 30px 24px !important; border: 1px solid rgba( var(--accent-rgb), .10 ); border-radius: 22px !important; background: var(--panel) !important; box-shadow: 0 30px 80px rgba(30,24,22,.18), 0 4px 18px rgba(30,24,22,.08); } /* ================================================== HEADER ================================================== */ #authModal .modal-header { align-items: flex-start; margin-bottom: 23px; } #authModal #authTitle { margin: 2px 0 0; color: var(--text); font-size: 25px; font-weight: 720; line-height: 1.15; letter-spacing: -.025em; } #authModal #authSubtitle { max-width: 300px; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.55; } /* Hide old eyebrow for cleaner login identity */ #authModal .eyebrow { display:none; } /* ================================================== CLOSE BUTTON ================================================== */ #authModal .modal-header .icon-btn { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); } #authModal .modal-header .icon-btn:hover { background: var(--hover); color: var(--text); } /* ================================================== REAL LOGIN / SIGNUP FIELDS ================================================== */ #authModal .auth-form { gap: 15px; } #authModal .field { gap: 7px; } #authModal .field > span { color: var(--muted); font-size: 10px; font-weight: 650; } #authModal .field input, #authModal .field select { width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 13px; outline: none; background: var(--surface); color: var(--text); font:inherit; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; } #authModal .field input:hover { border-color: rgba( var(--accent-rgb), .30 ); } #authModal .field input:focus, #authModal .field select:focus { border-color: rgba( var(--accent-rgb), .65 ); box-shadow: 0 0 0 4px rgba( var(--accent-rgb), .08 ); background: var(--panel); } #authModal .field input::placeholder { color: var(--muted-2); } /* ================================================== MAIN LOGIN / CREATE BUTTON ================================================== */ #authModal .primary-button { min-height: 44px; border: 0; border-radius: 13px !important; background: var(--accent); color: white; font-weight: 700; box-shadow: 0 8px 20px rgba( var(--accent-rgb), .16 ); transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; } #authModal .primary-button:hover { transform: translateY(-1px); box-shadow: 0 11px 25px rgba( var(--accent-rgb), .20 ); } #authModal .primary-button:active { transform: translateY(0); } /* ================================================== EMAIL / MOBILE SIGNUP SWITCH ================================================== */ #authModal .ultron-v4-signup-switch { padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-3); } #authModal .ultron-v4-signup-switch button { min-height: 37px; border-radius: 10px; font-size: 11px; } #authModal .ultron-v4-signup-switch button.active { background: var(--panel); color: var(--text); box-shadow: 0 3px 10px rgba(40,30,25,.07); } /* ================================================== ACCOUNT CHOOSER ================================================== */ #authModal .ultron-v4-account-row { min-height: 60px; padding: 10px 12px; border-radius: 15px; background: var(--surface); } #authModal .ultron-v4-account-avatar { width: 36px; height: 36px; font-size: 11px; } #authModal .ultron-v4-account-copy strong { font-size: 12px; font-weight: 700; } #authModal .ultron-v4-account-copy small { margin-top: 2px; font-size: 10px; } /* ================================================== LOGIN METHOD PAGE ================================================== */ #authModal .ultron-v4-outline-button { min-height: 43px; border-radius: 13px; background: var(--surface); font-size: 11px; font-weight: 620; } #authModal .ultron-v4-outline-button:hover { border-color: rgba( var(--accent-rgb), .32 ); background: var(--hover); } #authModal .ultron-v4-entry-input { min-height: 44px; padding: 0 14px; border-radius: 13px; } #authModal .ultron-v4-primary-button { min-height: 44px; border-radius: 13px; background: var(--accent); color: white; font-weight: 700; } /* ================================================== DIVIDER ================================================== */ #authModal .ultron-v4-divider { margin: 10px 0; font-size: 8.5px; letter-spacing: .07em; } /* ================================================== GUEST + BOTTOM ACTION ================================================== */ #authModal .ultron-v4-guest-link { margin-top: 2px; color: var(--muted); } #authModal .ultron-v4-bottom-link { margin-top: 9px; padding-top: 17px; } #authModal .ultron-v4-bottom-link button { color: var(--accent); font-weight: 700; } /* ================================================== LOGIN FORM'S EXISTING ACTION AREA ================================================== */ #authModal .modal-actions { display: flex; gap: 8px; margin-top: 3px; } #authModal .modal-actions .primary-button { flex: 1; } /* Guest secondary action visually quieter */ #authModal #continueGuestLogin, #authModal #continueGuestSignup { border: 0; background: transparent; color: var(--muted); box-shadow: none; } /* ================================================== SCROLLBAR ================================================== */ #authModal .auth-card { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } /* ================================================== SMALL SCREEN ================================================== */ @media(max-width:520px) { #authModal .auth-card { width: calc(100vw - 20px) !important; padding: 23px 20px 20px !important; border-radius: 18px !important; } #authModal #authTitle { font-size:22px; } } /* ULTRON PREMIUM AUTH V5 END */ /* ULTRON HEADER META CLEANUP START */ /* Remove backend connected/core ready line under ULTRON */ #pageSubtitle, #backendStatusDot { display: none !important; } /* Remove fixed language text under logged-in user name */ #activeUserMeta { display: none !important; } /* Keep header alignment neat after removing second lines */ #userChip { align-items: center !important; } /* ULTRON HEADER META CLEANUP END */ /* ULTRON GUEST POPOVER CREATE ACCOUNT HIDE START */ /* Guest dropdown: keep Login only */ #popoverSignup { display: none !important; } /* ULTRON GUEST POPOVER CREATE ACCOUNT HIDE END */ /* ULTRON PREMIUM COMPOSER BUTTONS V3 START */ /* ================================================== COMMON — SMALL METALLIC CONTROL ================================================== */ #voiceButton, #sendButton { position: relative !important; display: inline-grid !important; place-items: center !important; flex: 0 0 auto !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; /* Metallic outer rim + red illuminated ring + deep black inner surface. */ background: radial-gradient( circle at center, #111317 0%, #090a0c 45%, #050506 50%, transparent 51% ), radial-gradient( circle at center, transparent 0%, transparent 57%, #5f0808 58%, #ff1717 61%, #ff4a4a 63%, #6f0808 66%, transparent 68% ), conic-gradient( from 25deg, #747981, #24272c 12%, #555a61 23%, #15171a 36%, #777c84 49%, #202328 62%, #5d6269 76%, #121418 89%, #747981 ) !important; border: 1px solid #34373c !important; color: transparent !important; font-size: 0 !important; overflow: visible !important; cursor: pointer !important; isolation: isolate !important; box-shadow: 0 3px 8px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.20), inset 0 -1px 2px rgba(0,0,0,.70), 0 0 5px rgba(255,20,20,.16) !important; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important; } /* Hide existing visible glyph/SVG. Button functionality is NOT touched. */ #voiceButton > *, #sendButton > * { opacity: 0 !important; pointer-events: none !important; } /* ================================================== MIC BUTTON ================================================== */ #voiceButton { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; } /* Pure CSS SVG mask. No external image and no generated image. */ #voiceButton::before { content: ""; position: absolute !important; inset: 10px !important; z-index: 3 !important; background: linear-gradient( 145deg, #ffffff 0%, #d5d7da 48%, #8e9298 100% ) !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 15a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v7a3 3 0 0 0 3 3zm-5-3a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.92V21h3v2H8v-2h3v-2.08A7 7 0 0 1 5 12h2z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 15a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v7a3 3 0 0 0 3 3zm-5-3a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.92V21h3v2H8v-2h3v-2.08A7 7 0 0 1 5 12h2z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; filter: drop-shadow( 0 0 2px rgba(255,30,30,.80) ); pointer-events: none !important; } /* Subtle polished highlight */ #voiceButton::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid rgba(255,255,255,.10); pointer-events: none; z-index: 2; } /* ================================================== SEND BUTTON ================================================== */ #sendButton { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; margin-left: 3px !important; } /* Paper-plane/send vector */ #sendButton::before { content: ""; position: absolute !important; inset: 10px !important; z-index: 3 !important; background: linear-gradient( 145deg, #ffffff 0%, #d9dade 46%, #92969c 100% ) !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.44 11.34 3.63 2.44c-.82-.41-1.76.32-1.53 1.21l1.64 6.38L11.5 12l-7.76 1.97-1.64 6.38c-.23.89.71 1.62 1.53 1.21l17.81-8.9c.55-.28.55-1.04 0-1.32z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.44 11.34 3.63 2.44c-.82-.41-1.76.32-1.53 1.21l1.64 6.38L11.5 12l-7.76 1.97-1.64 6.38c-.23.89.71 1.62 1.53 1.21l17.81-8.9c.55-.28.55-1.04 0-1.32z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; filter: drop-shadow( 0 0 2px rgba(255,25,25,.90) ); pointer-events: none !important; } /* Inner metal reflection */ #sendButton::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid rgba(255,255,255,.11); box-shadow: inset 0 1px 2px rgba(255,255,255,.06); pointer-events: none; z-index: 2; } /* ================================================== HOVER — CONTROLLED, NOT TOO FLASHY ================================================== */ #voiceButton:hover, #sendButton:hover:not(:disabled) { transform: translateY(-1px) scale(1.04) !important; filter: brightness(1.08) !important; box-shadow: 0 5px 12px rgba(0,0,0,.22), inset 0 1px 1px rgba(255,255,255,.22), 0 0 8px rgba(255,20,20,.34), 0 0 14px rgba(255,20,20,.13) !important; } #voiceButton:active, #sendButton:active:not(:disabled) { transform: scale(.93) !important; } /* ================================================== MIC ACTIVE STATE ================================================== */ #voiceButton.active, #voiceButton.recording, #voiceButton[aria-pressed="true"] { box-shadow: 0 4px 10px rgba(0,0,0,.25), 0 0 8px rgba(255,15,15,.55), 0 0 17px rgba(255,15,15,.25), inset 0 0 5px rgba(255,20,20,.16) !important; filter: brightness(1.09) !important; } /* ================================================== SEND DISABLED ================================================== */ #sendButton:disabled { opacity: .58 !important; filter: grayscale(.28) brightness(.83) !important; cursor: default !important; transform: none !important; box-shadow: 0 2px 5px rgba(0,0,0,.12) !important; } /* ================================================== KEYBOARD FOCUS ================================================== */ #voiceButton:focus-visible, #sendButton:focus-visible { outline: 2px solid rgba(255,45,45,.72) !important; outline-offset: 3px !important; } /* ================================================== MOBILE — EVEN SMALLER ================================================== */ @media(max-width:520px) { #voiceButton { width: 37px !important; height: 37px !important; min-width: 37px !important; min-height: 37px !important; } #sendButton { width: 39px !important; height: 39px !important; min-width: 39px !important; min-height: 39px !important; } #voiceButton::before, #sendButton::before { inset: 9px !important; } } /* ULTRON PREMIUM COMPOSER BUTTONS V3 END */ /* ULTRON PREMIUM COMPOSER BUTTONS V3 SMALL SIZE START */ #voiceButton { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; } #sendButton { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; margin-left: 2px !important; } #voiceButton::before, #sendButton::before { inset: 8px !important; } #voiceButton::after, #sendButton::after { inset: 2px !important; } @media(max-width:520px) { #voiceButton { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } #sendButton { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; } #voiceButton::before, #sendButton::before { inset: 7px !important; } } /* ULTRON PREMIUM COMPOSER BUTTONS V3 SMALL SIZE END */ /* ULTRON COMPACT COMPOSER V1 START */ /* Main message box */ #chatForm { min-height: 44px !important; height: 44px !important; padding-top: 4px !important; padding-bottom: 4px !important; padding-left: 14px !important; padding-right: 7px !important; border-radius: 15px !important; } /* Typing area */ #chatInput { min-height: 32px !important; height: 32px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 32px !important; } /* Keep + button compact and vertically centered */ #attachButton { width: 28px !important; height: 28px !important; min-width: 28px !important; } /* ULTRON COMPACT COMPOSER V1 END */ /* ULTRON PREMIUM MESSAGE UX V1 CSS START */ /* ================================================== USER MESSAGE — COMPACT RIGHT BUBBLE ================================================== */ #conversation .message.user { width: 100% !important; display: flex !important; justify-content: flex-end !important; margin: 8px 0 18px !important; } #conversation .message.user > .bubble { width: auto !important; max-width: min( 680px, 72% ) !important; padding: 11px 15px !important; border: 1px solid color-mix( in srgb, var(--accent) 14%, var(--line) ) !important; border-radius: 18px 18px 6px 18px !important; background: linear-gradient( 145deg, color-mix( in srgb, var(--accent) 8%, var(--surface) ), var(--surface) ) !important; color: var(--text) !important; box-shadow: 0 4px 14px rgba(30,24,22,.045) !important; font-size: 14px !important; line-height: 1.55 !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; } /* ================================================== ULTRON RESPONSE — FULL WIDTH ================================================== */ #conversation .message.assistant { position: relative !important; width: 100% !important; max-width: none !important; display: block !important; padding: 10px 0 22px !important; margin: 0 !important; } #conversation .message.assistant > .bubble { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text) !important; } /* ================================================== RESPONSE TYPOGRAPHY ================================================== */ .ultron-answer-body { width: 100%; color: var(--text); font-size: 14px; line-height: 1.74; letter-spacing: -.004em; overflow-wrap: anywhere; } .ultron-answer-body p { margin: 0 0 13px; } .ultron-answer-body p:last-child { margin-bottom: 0; } .ultron-answer-body h2, .ultron-answer-body h3, .ultron-answer-body h4 { margin: 22px 0 9px; color: var(--text); line-height: 1.3; letter-spacing: -.018em; } .ultron-answer-body h2 { font-size: 18px; } .ultron-answer-body h3 { font-size: 16px; } .ultron-answer-body h4 { font-size: 14px; } .ultron-answer-body ul, .ultron-answer-body ol { margin: 8px 0 15px; padding-left: 22px; } .ultron-answer-body li { margin: 5px 0; padding-left: 2px; } .ultron-answer-body blockquote { margin: 14px 0; padding: 10px 14px; border-left: 3px solid color-mix( in srgb, var(--accent) 52%, var(--line) ); border-radius: 0 10px 10px 0; background: color-mix( in srgb, var(--accent) 5%, var(--surface) ); color: var(--muted); line-height: 1.65; } /* ================================================== WHOLE REPLY COPY BUTTON HOVER ONLY ================================================== */ .ultron-reply-copy { position: absolute; top: 5px; right: 2px; min-width: 46px; height: 27px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: color-mix( in srgb, var(--surface) 88%, transparent ); color: var(--muted); font: inherit; font-size: 10px; font-weight: 650; cursor: pointer; opacity: 0; transform: translateY(2px); pointer-events: none; transition: opacity .15s ease, transform .15s ease, color .15s ease, border-color .15s ease, background .15s ease; } #conversation .message.assistant:hover > .ultron-reply-copy { opacity: 1; transform: translateY(0); pointer-events: auto; } .ultron-reply-copy:hover { color: var(--text); border-color: color-mix( in srgb, var(--accent) 28%, var(--line) ); background: var(--surface); } .ultron-reply-copy.copied { color: var(--accent); } /* ================================================== PREMIUM CODE BLOCK ================================================== */ .ultron-code-block { width: 100%; margin: 16px 0 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: #151618; box-shadow: 0 8px 24px rgba(0,0,0,.10); } .ultron-code-header { height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 0 14px; border-bottom: 1px solid rgba(255,255,255,.07); background: linear-gradient( 180deg, #202124, #1a1b1e ); } .ultron-code-language { color: #aaaeb5; font-size: 10px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; } .ultron-code-copy { height: 25px; padding: 0 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: rgba(255,255,255,.035); color: #bdc0c6; font: inherit; font-size: 9.5px; cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease; } .ultron-code-copy:hover { border-color: rgba(255,255,255,.17); background: rgba(255,255,255,.07); color: #ffffff; } .ultron-code-copy.copied { color: #ffffff; } .ultron-code-block pre { margin: 0; padding: 16px 17px 18px; overflow-x: auto; background: transparent; color: #e7e9ed; font-family: "Ubuntu Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12.5px; line-height: 1.65; tab-size: 4; } .ultron-code-block code { font: inherit; color: inherit; white-space: pre; } /* ================================================== INTELLIGENCE / THINKING STATE ================================================== */ .ultron-thinking-row { width: 100%; display: flex; align-items: center; gap: 9px; min-height: 32px; margin: 2px 0 16px; padding: 4px 0; color: var(--muted); font-size: 11px; font-weight: 580; letter-spacing: .005em; } .ultron-thinking-intelligence { position: relative; width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 20px; border: 1px solid color-mix( in srgb, var(--accent) 18%, var(--line) ); border-radius: 50%; background: color-mix( in srgb, var(--accent) 4%, var(--surface) ); } .ultron-thinking-intelligence::before { content: ""; position: absolute; inset: -1px; border: 1px solid color-mix( in srgb, var(--accent) 25%, transparent ); border-radius: 50%; animation: ultron-intelligence-pulse 1.55s ease-out infinite; } .ultron-thinking-core { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px color-mix( in srgb, var(--accent) 45%, transparent ); animation: ultron-core-breathe 1.25s ease-in-out infinite; } .ultron-thinking-text { position: relative; top: .5px; } @keyframes ultron-intelligence-pulse { 0% { transform: scale(.72); opacity: .65; } 70% { transform: scale(1.42); opacity: 0; } 100% { transform: scale(1.42); opacity: 0; } } @keyframes ultron-core-breathe { 0%, 100% { transform: scale(.82); opacity: .64; } 50% { transform: scale(1.05); opacity: 1; } } /* ================================================== REDUCED MOTION ================================================== */ @media( prefers-reduced-motion: reduce ) { .ultron-thinking-intelligence::before, .ultron-thinking-core { animation: none !important; } } /* ================================================== MOBILE ================================================== */ @media(max-width:520px) { #conversation .message.user > .bubble { max-width: 84% !important; } .ultron-answer-body { font-size: 13.5px; line-height: 1.7; } .ultron-code-block pre { padding: 14px; font-size: 12px; } } /* ULTRON PREMIUM MESSAGE UX V1 CSS END */ /* ========================================================== ULTRON MESSAGE COLOR TUNE V1 START Keep old layout. Change only message color feel. ========================================================== */ .message.user .bubble { background: linear-gradient( 180deg, rgba(163, 132, 122, 0.14), rgba(163, 132, 122, 0.08) ) !important; border: 1px solid rgba(140, 108, 98, 0.22) !important; color: #4a352f !important; box-shadow: 0 4px 14px rgba(80, 58, 50, 0.05) !important; } .message.assistant .bubble { background: linear-gradient( 180deg, rgba(120, 140, 170, 0.09), rgba(120, 140, 170, 0.04) ) !important; border: 1px solid rgba(110, 125, 150, 0.18) !important; color: #2f2f35 !important; box-shadow: 0 4px 14px rgba(60, 70, 90, 0.04) !important; } .message.assistant.error .bubble { background: linear-gradient( 180deg, rgba(190, 90, 90, 0.10), rgba(190, 90, 90, 0.05) ) !important; border: 1px solid rgba(170, 80, 80, 0.22) !important; color: #5a2f2f !important; } .message .bubble { border-radius: 18px !important; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } .message.user .bubble:hover { box-shadow: 0 6px 18px rgba(80, 58, 50, 0.08) !important; } .message.assistant .bubble:hover { box-shadow: 0 6px 18px rgba(60, 70, 90, 0.06) !important; } /* Sources inside assistant reply should stay readable */ .message.assistant .bubble a { color: #5c4a43 !important; word-break: break-word !important; } .message.assistant .bubble ul, .message.assistant .bubble ol, .message.assistant .bubble p { color: inherit !important; } /* Copy button subtle cleanup */ .message.assistant button, .message.assistant .copy-button { border-radius: 12px !important; } /* ========================================================== ULTRON MESSAGE COLOR TUNE V1 END ========================================================== */ /* ULTRON MESSAGE RESPONSIVE LANE V2 CSS START */ /* * Immediate conversation shell. * * Remove old centered/max-width behaviour. * Width now follows the REAL available chat area. */ .ultron-responsive-message-shell-v2 { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* * Actual parent of .message elements. * * Important: * fixed 24px horizontal breathing room means: * * collapsed sidebar → 24px * medium sidebar → 24px * expanded sidebar → 24px * * So text does not jump toward center. */ .ultron-responsive-message-lane-v2 { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- ASSISTANT ---------------------------------------------------------- */ .ultron-responsive-message-lane-v2 > .message.assistant { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .ultron-responsive-message-lane-v2 > .message.assistant .bubble { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* * Normal paragraphs naturally reflow according * to available browser width. */ .ultron-responsive-message-lane-v2 > .message.assistant .bubble p, .ultron-responsive-message-lane-v2 > .message.assistant .bubble ul, .ultron-responsive-message-lane-v2 > .message.assistant .bubble ol, .ultron-responsive-message-lane-v2 > .message.assistant .bubble blockquote { max-width: 100% !important; box-sizing: border-box !important; } /* * Prevent URLs from breaking layout. */ .ultron-responsive-message-lane-v2 > .message.assistant .bubble a { overflow-wrap: anywhere !important; } /* * Code remains horizontally scrollable. */ .ultron-responsive-message-lane-v2 > .message.assistant .bubble pre { max-width: 100% !important; overflow-x: auto !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- USER ---------------------------------------------------------- */ /* * User stays right aligned. * Existing visual design/color remains untouched. */ .ultron-responsive-message-lane-v2 > .message.user { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* * Existing user bubble sizing is preserved. * It only cannot escape the available width. */ .ultron-responsive-message-lane-v2 > .message.user .bubble { max-width: min( 72%, 680px ) !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- SMALL SCREEN ---------------------------------------------------------- */ @media (max-width: 720px) { .ultron-responsive-message-lane-v2 { padding-left: 14px !important; padding-right: 14px !important; } .ultron-responsive-message-lane-v2 > .message.user .bubble { max-width: 86% !important; } } /* ULTRON MESSAGE RESPONSIVE LANE V2 CSS END */ /* ULTRON SIDEBAR COMPACT 54 V1 START */ /* * Width only. * Drag behaviour / expansion logic remains unchanged. */ .sidebar.is-compact, .sidebar.compact, body.sidebar-compact .sidebar { width: 54px !important; min-width: 54px !important; flex-basis: 54px !important; } /* * Keep compact icons centered inside the narrower rail. */ .sidebar.is-compact .nav-item, .sidebar.compact .nav-item, body.sidebar-compact .sidebar .nav-item { justify-content: center !important; } /* ULTRON SIDEBAR COMPACT 54 V1 END */ /* ULTRON MESSAGE COLOR IDENTITY V4 CSS START */ /* * USER is handled directly at runtime. * * ULTRON label in current UI may be generated through * .bubble::before, so handle that exact case too. */ .message.assistant .bubble::before { color: #5f8d69 !important; font-weight: 800 !important; } /* ULTRON MESSAGE COLOR IDENTITY V4 CSS END */ /* ULTRON ASSISTANT ALIGNMENT RHYTHM V2 START */ /* ========================================================== RESPONSE CONTAINER ========================================================== */ .message.assistant { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; text-align: left !important; box-sizing: border-box !important; } /* ========================================================== ANSWER BODY ========================================================== */ .message.assistant .bubble { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; text-align: left !important; line-height: 1.58 !important; letter-spacing: 0 !important; word-spacing: normal !important; box-sizing: border-box !important; } /* ========================================================== PARAGRAPHS ========================================================== */ .message.assistant .bubble p { margin: 0 0 12px 0 !important; padding: 0 !important; line-height: 1.58 !important; text-align: left !important; } /* * Consecutive paragraphs need clear separation, * but not huge empty gaps. */ .message.assistant .bubble p + p { margin-top: 4px !important; } /* Last paragraph clean finish */ .message.assistant .bubble p:last-child { margin-bottom: 0 !important; } /* ========================================================== HEADINGS ========================================================== */ .message.assistant .bubble h1, .message.assistant .bubble h2, .message.assistant .bubble h3, .message.assistant .bubble h4, .message.assistant .bubble h5, .message.assistant .bubble h6 { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; text-align: left !important; line-height: 1.32 !important; } .message.assistant .bubble h1 { margin-top: 22px !important; margin-bottom: 10px !important; } .message.assistant .bubble h2, .message.assistant .bubble h3 { margin-top: 19px !important; margin-bottom: 8px !important; } .message.assistant .bubble h4, .message.assistant .bubble h5, .message.assistant .bubble h6 { margin-top: 16px !important; margin-bottom: 7px !important; } /* * First heading/content should never get unnecessary * top spacing. */ .message.assistant .bubble > :first-child { margin-top: 0 !important; } /* ========================================================== BULLET / NUMBERED LISTS ========================================================== */ .message.assistant .bubble ul, .message.assistant .bubble ol { margin: 7px 0 14px 0 !important; padding-left: 22px !important; padding-right: 0 !important; line-height: 1.54 !important; box-sizing: border-box !important; } .message.assistant .bubble li { margin: 0 0 6px 0 !important; padding-left: 2px !important; line-height: 1.54 !important; text-align: left !important; } .message.assistant .bubble li:last-child { margin-bottom: 0 !important; } /* * Paragraph inside list must not create double spacing. */ .message.assistant .bubble li > p { margin: 0 !important; line-height: inherit !important; } /* Nested lists */ .message.assistant .bubble li ul, .message.assistant .bubble li ol { margin-top: 5px !important; margin-bottom: 5px !important; } /* ========================================================== SOURCES / LINKS ========================================================== */ .message.assistant .bubble a { line-height: inherit !important; overflow-wrap: anywhere !important; word-break: normal !important; } /* * Long source links should wrap naturally, * not create awkward horizontal layout. */ .message.assistant .bubble li a { display: inline !important; } /* ========================================================== STRONG / INLINE CONTENT ========================================================== */ .message.assistant .bubble strong, .message.assistant .bubble em, .message.assistant .bubble span { line-height: inherit !important; } /* ========================================================== BLOCKQUOTE ========================================================== */ .message.assistant .bubble blockquote { margin: 13px 0 14px 0 !important; padding: 5px 0 5px 13px !important; line-height: 1.55 !important; box-sizing: border-box !important; } .message.assistant .bubble blockquote p { margin-bottom: 7px !important; } .message.assistant .bubble blockquote p:last-child { margin-bottom: 0 !important; } /* ========================================================== CODE BLOCK ========================================================== */ .message.assistant .bubble pre { width: 100% !important; max-width: 100% !important; margin: 13px 0 16px 0 !important; box-sizing: border-box !important; overflow-x: auto !important; } .message.assistant .bubble code { line-height: 1.52 !important; } /* ========================================================== TABLES ========================================================== */ .message.assistant .bubble table { margin: 13px 0 16px 0 !important; max-width: 100% !important; line-height: 1.5 !important; } /* ========================================================== FINAL ELEMENT Prevent unnecessary empty area after answer ========================================================== */ .message.assistant .bubble > :last-child { margin-bottom: 0 !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 720px) { .message.assistant .bubble { line-height: 1.55 !important; } .message.assistant .bubble p { margin-bottom: 11px !important; line-height: 1.55 !important; } .message.assistant .bubble ul, .message.assistant .bubble ol { padding-left: 20px !important; } } /* ULTRON ASSISTANT ALIGNMENT RHYTHM V2 END */ /* ULTRON COMPOSER AUTO GROW V3 CSS START */ /* ========================================================== FORM ========================================================== */ #chatForm { height: auto !important; min-height: 44px !important; /* JS sets this according to 10 actual visible lines */ max-height: var( --ultron-composer-max-h, 230px ) !important; display: flex !important; align-items: flex-end !important; box-sizing: border-box !important; } /* ========================================================== TEXTAREA ========================================================== */ #chatInput { /* * JS controls ONLY this variable. * Using a CSS variable is important because older * stylesheet rules may already use !important. */ height: var( --ultron-input-height, 32px ) !important; min-height: 32px !important; max-height: var( --ultron-input-max-height, 212px ) !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; /* * Old compact composer used a one-line style. * 20px gives proper multiline reading like the * second reference image. */ line-height: 20px !important; padding-top: 6px !important; padding-bottom: 6px !important; resize: none !important; overflow-x: hidden !important; overflow-y: hidden !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; box-sizing: border-box !important; } /* ========================================================== ABOVE 10 LINES ========================================================== */ #chatInput.ultron-composer-scroll-v3 { overflow-y: auto !important; } /* ========================================================== BUTTONS Stay at bottom just like second reference image. ========================================================== */ #chatForm #attachButton, #chatForm #micButton, #chatForm #sendButton { flex: 0 0 auto !important; align-self: flex-end !important; } /* ========================================================== SCROLLBAR ========================================================== */ #chatInput::-webkit-scrollbar { width: 5px; } #chatInput::-webkit-scrollbar-track { background: transparent; } #chatInput::-webkit-scrollbar-thumb { background: rgba( 95, 87, 82, 0.24 ); border-radius: 999px; } #chatInput { scrollbar-width: thin; } /* ULTRON COMPOSER AUTO GROW V3 CSS END */ /* ULTRON CODE EDITOR V4 CSS START */ /* ========================================================== CODE CARD ========================================================== */ .message.assistant .ultron-code-block { width: 100% !important; max-width: 100% !important; margin: 14px 0 18px !important; overflow: hidden !important; border: 1px solid rgba( 112, 154, 184, 0.22 ) !important; border-radius: 12px !important; background: rgba( 248, 251, 253, 0.76 ) !important; box-shadow: 0 4px 16px rgba( 50, 74, 92, 0.045 ) !important; box-sizing: border-box !important; } /* ========================================================== HEADER ========================================================== */ .message.assistant .ultron-code-header, .message.assistant .ultron-code-toolbar, .message.assistant .code-header, .message.assistant .code-toolbar { min-height: 34px !important; padding: 6px 9px 6px 12px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; border-bottom: 1px solid rgba( 112, 154, 184, 0.16 ) !important; background: rgba( 220, 238, 248, 0.58 ) !important; } /* Language label */ .message.assistant .ultron-code-language, .message.assistant .code-language, .message.assistant .language-label { color: #416f8b !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0.11em !important; text-transform: uppercase !important; } /* ========================================================== PRE ========================================================== */ .message.assistant pre { width: 100% !important; max-width: 100% !important; margin: 14px 0 18px !important; padding: 14px 0 16px !important; overflow-x: auto !important; overflow-y: hidden !important; border: 1px solid rgba( 112, 154, 184, 0.20 ) !important; border-radius: 12px !important; background: rgba( 248, 251, 253, 0.76 ) !important; box-shadow: 0 4px 16px rgba( 50, 74, 92, 0.04 ) !important; white-space: pre !important; tab-size: 4 !important; box-sizing: border-box !important; } /* No double card */ .message.assistant .ultron-code-block pre { margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } /* ========================================================== CODE FONT ========================================================== */ .message.assistant pre code { display: block !important; min-width: max-content !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: #35445a !important; font-family: "Cascadia Code", "SFMono-Regular", "Liberation Mono", "DejaVu Sans Mono", Consolas, monospace !important; font-size: 13px !important; font-weight: 450 !important; line-height: 1.58 !important; letter-spacing: 0 !important; white-space: pre !important; word-break: normal !important; overflow-wrap: normal !important; font-variant-ligatures: none !important; } /* ========================================================== LINE NUMBERS ========================================================== */ .message.assistant .ultron-code-line { position: relative !important; display: block !important; min-height: 1.58em !important; padding-left: 54px !important; padding-right: 18px !important; box-sizing: border-box !important; } .message.assistant .ultron-code-line::before { content: attr(data-line); position: absolute; left: 0; top: 0; width: 38px; padding-right: 10px; text-align: right; color: rgba( 91, 111, 130, 0.45 ); border-right: 1px solid rgba( 110, 143, 164, 0.12 ); user-select: none; pointer-events: none; } /* Subtle line hover */ .message.assistant .ultron-code-line:hover { background: rgba( 213, 233, 244, 0.25 ) !important; } /* ========================================================== REAL TOKEN COLORS ========================================================== */ /* Default code */ .message.assistant pre code { color: #33445b !important; } /* Keyword */ .message.assistant .ultron-token-keyword { color: #7b4fb3 !important; font-weight: 650 !important; } /* String */ .message.assistant .ultron-token-string { color: #2f7a59 !important; } /* Number */ .message.assistant .ultron-token-number { color: #b36b28 !important; } /* Comment */ .message.assistant .ultron-token-comment { color: #71867a !important; font-style: italic !important; } /* Function */ .message.assistant .ultron-token-function { color: #2f70aa !important; font-weight: 600 !important; } /* Property / attribute */ .message.assistant .ultron-token-property { color: #447d97 !important; } /* HTML tag */ .message.assistant .ultron-token-tag { color: #8350a1 !important; font-weight: 600 !important; } /* Operator */ .message.assistant .ultron-token-operator { color: #5c6880 !important; } /* Punctuation */ .message.assistant .ultron-token-punctuation { color: #7b8695 !important; } /* ========================================================== COPY BUTTON ========================================================== */ .message.assistant .ultron-code-block button, .message.assistant .ultron-code-copy, .message.assistant .code-copy, .message.assistant button[data-copy-code] { min-height: 24px !important; padding: 3px 8px !important; border: 1px solid rgba( 78, 128, 156, 0.20 ) !important; border-radius: 6px !important; background: rgba( 255, 255, 255, 0.60 ) !important; color: #476c80 !important; font-size: 9px !important; font-weight: 700 !important; box-shadow: none !important; } /* ========================================================== INLINE CODE ========================================================== */ .message.assistant p code, .message.assistant li code { padding: 2px 6px !important; border: 1px solid rgba( 117, 97, 164, 0.15 ) !important; border-radius: 5px !important; background: rgba( 231, 225, 244, 0.46 ) !important; color: #69528d !important; font-family: "Cascadia Code", "Liberation Mono", Consolas, monospace !important; font-size: 0.90em !important; } /* ========================================================== SCROLLBAR ========================================================== */ .message.assistant pre::-webkit-scrollbar { height: 6px; } .message.assistant pre::-webkit-scrollbar-track { background: transparent; } .message.assistant pre::-webkit-scrollbar-thumb { background: rgba( 77, 117, 143, 0.25 ); border-radius: 999px; } .message.assistant pre { scrollbar-width: thin; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 720px) { .message.assistant pre code { font-size: 12.5px !important; } .message.assistant .ultron-code-line { padding-left: 47px !important; padding-right: 13px !important; } .message.assistant .ultron-code-line::before { width: 32px; padding-right: 8px; } } /* ULTRON CODE EDITOR V4 CSS END */ /* ULTRON CODE EDITOR POLISH V5 START */ /* ========================================================== MAIN CODE CARD ========================================================== */ .message.assistant .ultron-code-block { border: 1px solid rgba(83, 129, 158, 0.22) !important; border-radius: 13px !important; background: rgba(250, 252, 253, 0.92) !important; box-shadow: 0 8px 26px rgba(42, 63, 78, 0.055) !important; transition: border-color 0.18s ease, box-shadow 0.18s ease !important; } .message.assistant .ultron-code-block:hover { border-color: rgba(73, 126, 159, 0.31) !important; box-shadow: 0 10px 30px rgba(42, 63, 78, 0.075) !important; } /* ========================================================== HEADER / TOOLBAR ========================================================== */ .message.assistant .ultron-code-header, .message.assistant .ultron-code-toolbar, .message.assistant .code-header, .message.assistant .code-toolbar { min-height: 38px !important; padding: 7px 9px 7px 13px !important; border-bottom: 1px solid rgba(89, 136, 164, 0.14) !important; background: linear-gradient( 180deg, rgba(224, 240, 249, 0.72), rgba(235, 246, 251, 0.52) ) !important; } /* ========================================================== LANGUAGE BADGE ========================================================== */ .message.assistant .ultron-code-language, .message.assistant .code-language, .message.assistant .language-label { display: inline-flex !important; align-items: center !important; min-height: 22px !important; padding: 0 8px !important; border: 1px solid rgba(68, 123, 157, 0.15) !important; border-radius: 6px !important; background: rgba(255, 255, 255, 0.50) !important; color: #356b8a !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0.11em !important; text-transform: uppercase !important; } /* ========================================================== COPY BUTTON ========================================================== */ .message.assistant .ultron-code-block button, .message.assistant .ultron-code-copy, .message.assistant .code-copy, .message.assistant button[data-copy-code] { min-width: 42px !important; min-height: 25px !important; padding: 4px 9px !important; border: 1px solid rgba(71, 118, 147, 0.18) !important; border-radius: 7px !important; background: rgba(255, 255, 255, 0.68) !important; color: #42687e !important; font-size: 9px !important; font-weight: 700 !important; box-shadow: 0 1px 3px rgba(41, 61, 74, 0.04) !important; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important; } .message.assistant .ultron-code-block button:hover, .message.assistant .ultron-code-copy:hover, .message.assistant .code-copy:hover, .message.assistant button[data-copy-code]:hover { background: #ffffff !important; border-color: rgba(55, 105, 137, 0.33) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(46, 69, 84, 0.08) !important; } /* ========================================================== CODE BODY ========================================================== */ .message.assistant pre { background: rgba(249, 251, 252, 0.96) !important; /* * Large code shouldn't make the whole chat infinitely tall. */ max-height: 520px !important; overflow-x: auto !important; overflow-y: auto !important; } /* * Wrapped block already has outer card. */ .message.assistant .ultron-code-block pre { background: rgba(249, 251, 252, 0.96) !important; } /* ========================================================== CODE FONT / RHYTHM ========================================================== */ .message.assistant pre code { color: #344457 !important; font-size: 13.2px !important; line-height: 1.66 !important; font-weight: 450 !important; font-variant-ligatures: none !important; } /* ========================================================== LINE NUMBER GUTTER ========================================================== */ .message.assistant .ultron-code-line { min-height: 1.66em !important; padding-left: 58px !important; padding-right: 20px !important; transition: background 0.12s ease !important; } .message.assistant .ultron-code-line::before { width: 40px !important; padding-right: 11px !important; color: rgba(77, 96, 115, 0.42) !important; background: rgba(225, 235, 241, 0.35) !important; border-right: 1px solid rgba(88, 124, 146, 0.12) !important; } /* * Premium editor-like active row feedback. */ .message.assistant .ultron-code-line:hover { background: rgba(214, 234, 246, 0.30) !important; } .message.assistant .ultron-code-line:hover::before { color: rgba(55, 84, 108, 0.72) !important; background: rgba(203, 226, 240, 0.48) !important; } /* ========================================================== TOKEN PALETTE — RICHER BUT SOFT ========================================================== */ /* default */ .message.assistant pre code { color: #33475b !important; } /* keywords: def, if, return, const, SELECT */ .message.assistant .ultron-token-keyword { color: #7650b5 !important; font-weight: 700 !important; } /* strings */ .message.assistant .ultron-token-string { color: #267557 !important; } /* numbers */ .message.assistant .ultron-token-number { color: #b36525 !important; font-weight: 550 !important; } /* functions */ .message.assistant .ultron-token-function { color: #286fa8 !important; font-weight: 650 !important; } /* comments */ .message.assistant .ultron-token-comment { color: #75857a !important; font-style: italic !important; } /* properties / HTML attributes */ .message.assistant .ultron-token-property { color: #3f809a !important; } /* tags */ .message.assistant .ultron-token-tag { color: #8a4fa0 !important; font-weight: 650 !important; } /* operators */ .message.assistant .ultron-token-operator { color: #53667c !important; font-weight: 550 !important; } /* punctuation */ .message.assistant .ultron-token-punctuation { color: #7b8794 !important; } /* ========================================================== INLINE CODE ========================================================== */ .message.assistant p code, .message.assistant li code, .message.assistant blockquote code { padding: 2px 6px !important; border: 1px solid rgba(105, 89, 154, 0.16) !important; border-radius: 6px !important; background: rgba(230, 224, 243, 0.46) !important; color: #674f8e !important; font-weight: 550 !important; } /* ========================================================== CODE SELECTION ========================================================== */ .message.assistant pre code::selection, .message.assistant .ultron-code-line::selection { background: rgba(95, 145, 207, 0.23) !important; } /* ========================================================== SCROLLBAR ========================================================== */ .message.assistant pre::-webkit-scrollbar { width: 7px !important; height: 7px !important; } .message.assistant pre::-webkit-scrollbar-track { background: rgba(228, 236, 241, 0.30) !important; } .message.assistant pre::-webkit-scrollbar-thumb { background: rgba(79, 113, 137, 0.28) !important; border-radius: 999px !important; } .message.assistant pre::-webkit-scrollbar-thumb:hover { background: rgba(70, 104, 130, 0.46) !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 720px) { .message.assistant pre { max-height: 430px !important; } .message.assistant pre code { font-size: 12.6px !important; line-height: 1.62 !important; } .message.assistant .ultron-code-line { padding-left: 50px !important; padding-right: 14px !important; } .message.assistant .ultron-code-line::before { width: 34px !important; padding-right: 8px !important; } } /* ULTRON CODE EDITOR POLISH V5 END */ /* ULTRON CODE EDITOR V6 CSS START */ /* ========================================================== EDITOR FRAME ========================================================== */ .message.assistant .ultron-code-block { border: 1px solid rgba(85, 111, 132, 0.20) !important; border-radius: 11px !important; background: #f8fafb !important; box-shadow: 0 8px 24px rgba(34, 48, 60, 0.065) !important; overflow: hidden !important; } /* ========================================================== REAL EDITOR TOP BAR ========================================================== */ .message.assistant .ultron-code-header, .message.assistant .ultron-code-toolbar, .message.assistant .code-header, .message.assistant .code-toolbar { position: sticky !important; top: 0 !important; z-index: 5 !important; min-height: 40px !important; padding: 0 9px 0 12px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; border-bottom: 1px solid rgba(84, 110, 130, 0.13) !important; background: rgba(239, 244, 247, 0.96) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .ultron-editor-left-v6 { min-width: 0; display: flex; align-items: center; gap: 9px; } /* ========================================================== WINDOW DOTS ========================================================== */ .ultron-editor-dots-v6 { position: relative; width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #e98a84; box-shadow: 14px 0 0 #ddb466, 28px 0 0 #7fb58b; margin-right: 29px; opacity: 0.82; } /* ========================================================== LANGUAGE ========================================================== */ .message.assistant .ultron-code-language { min-height: 20px !important; padding: 0 7px !important; display: inline-flex !important; align-items: center !important; border: 1px solid rgba(65, 105, 132, 0.13) !important; border-radius: 5px !important; background: rgba(255, 255, 255, 0.56) !important; color: #376c8c !important; font-size: 8.5px !important; font-weight: 800 !important; letter-spacing: 0.10em !important; } /* ========================================================== FILE NAME ========================================================== */ .ultron-code-filename-v6 { min-width: 0; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #56636c; font-family: "Cascadia Code", "SFMono-Regular", "Liberation Mono", monospace; font-size: 10.5px; font-weight: 550; letter-spacing: -0.01em; } /* ========================================================== COPY BUTTON ========================================================== */ .message.assistant .ultron-code-block button, .message.assistant .ultron-code-copy, .message.assistant .code-copy, .message.assistant button[data-copy-code] { min-width: 44px !important; min-height: 25px !important; padding: 0 9px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(76, 103, 122, 0.15) !important; border-radius: 6px !important; background: rgba(255, 255, 255, 0.68) !important; color: #4b606e !important; font-size: 9px !important; font-weight: 700 !important; cursor: pointer !important; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important; } .message.assistant .ultron-code-block button:hover, .message.assistant .ultron-code-copy:hover, .message.assistant .code-copy:hover, .message.assistant button[data-copy-code]:hover { background: #ffffff !important; border-color: rgba(57, 92, 116, 0.30) !important; transform: translateY(-1px) !important; } /* ========================================================== CODE VIEWPORT ========================================================== */ .message.assistant .ultron-code-block pre { max-height: 560px !important; margin: 0 !important; padding: 10px 0 13px !important; overflow: auto !important; background: #fbfcfd !important; border: 0 !important; border-radius: 0 !important; } /* ========================================================== CODE FONT ========================================================== */ .message.assistant pre code { color: #2f4050 !important; font-family: "Cascadia Code", "SFMono-Regular", "Liberation Mono", "DejaVu Sans Mono", Consolas, monospace !important; font-size: 13px !important; font-weight: 450 !important; line-height: 1.65 !important; font-variant-ligatures: none !important; -webkit-font-smoothing: antialiased; } /* ========================================================== REAL GUTTER ========================================================== */ .message.assistant .ultron-code-line { position: relative !important; display: block !important; min-height: 1.65em !important; padding-left: 63px !important; padding-right: 20px !important; border-left: 2px solid transparent !important; box-sizing: border-box !important; transition: background 0.10s ease, border-color 0.10s ease !important; } .message.assistant .ultron-code-line::before { content: attr(data-line); position: absolute; top: 0; bottom: 0; left: 0; width: 43px; padding-right: 11px; display: flex; align-items: flex-start; justify-content: flex-end; box-sizing: content-box; color: #98a3ab; background: #f3f6f8; border-right: 1px solid #e5eaed; text-align: right; font-size: 11px; font-weight: 450; user-select: none; pointer-events: none; } /* ========================================================== HOVER LINE ========================================================== */ .message.assistant .ultron-code-line:hover { background: #f1f7fa !important; } /* ========================================================== CLICKED / ACTIVE LINE ========================================================== */ .message.assistant .ultron-code-line.ultron-active-line-v6 { background: #eaf4fa !important; border-left-color: #67a4c8 !important; } .message.assistant .ultron-code-line.ultron-active-line-v6::before { color: #4f7c98; background: #e3eff5; font-weight: 650; } /* ========================================================== SYNTAX PALETTE ========================================================== */ .message.assistant .ultron-token-keyword { color: #7b4eb0 !important; font-weight: 700 !important; } .message.assistant .ultron-token-string { color: #257354 !important; } .message.assistant .ultron-token-number { color: #af6426 !important; font-weight: 550 !important; } .message.assistant .ultron-token-function { color: #246da8 !important; font-weight: 650 !important; } .message.assistant .ultron-token-comment { color: #7d8b80 !important; font-style: italic !important; } .message.assistant .ultron-token-property { color: #377b98 !important; } .message.assistant .ultron-token-tag { color: #8a4f9f !important; font-weight: 650 !important; } .message.assistant .ultron-token-operator { color: #576779 !important; font-weight: 550 !important; } .message.assistant .ultron-token-punctuation { color: #808a93 !important; } /* ========================================================== SELECTION ========================================================== */ .message.assistant pre code::selection, .message.assistant pre code *::selection { background: rgba(85, 150, 198, 0.24) !important; color: inherit !important; } /* ========================================================== FOCUS ========================================================== */ .message.assistant .ultron-code-block pre:focus { outline: none !important; box-shadow: inset 0 0 0 1px rgba(82, 145, 185, 0.22) !important; } /* ========================================================== SCROLLBAR ========================================================== */ .message.assistant .ultron-code-block pre::-webkit-scrollbar { width: 8px; height: 8px; } .message.assistant .ultron-code-block pre::-webkit-scrollbar-track { background: #f2f5f6; } .message.assistant .ultron-code-block pre::-webkit-scrollbar-thumb { background: #c4cfd5; border-radius: 999px; border: 2px solid #f2f5f6; } .message.assistant .ultron-code-block pre::-webkit-scrollbar-thumb:hover { background: #aebdc5; } /* ========================================================== INLINE CODE ========================================================== */ .message.assistant p code, .message.assistant li code { padding: 2px 6px !important; border: 1px solid rgba(94, 81, 143, 0.14) !important; border-radius: 5px !important; background: #f0edf6 !important; color: #654d89 !important; font-family: "Cascadia Code", "Liberation Mono", monospace !important; font-size: 0.90em !important; font-weight: 550 !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 720px) { .ultron-editor-dots-v6 { display: none; } .ultron-code-filename-v6 { max-width: 120px; font-size: 10px; } .message.assistant .ultron-code-line { padding-left: 52px !important; padding-right: 13px !important; } .message.assistant .ultron-code-line::before { width: 34px; padding-right: 8px; } .message.assistant .ultron-code-block pre { max-height: 440px !important; } } /* ULTRON CODE EDITOR V6 CSS END */ /* ULTRON CODE RUN FRONTEND V1 CSS START */ /* ========================================================== RUN / COPY GROUP ========================================================== */ .ultron-run-actions-v1 { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } /* ========================================================== RUN BUTTON ========================================================== */ .message.assistant .ultron-run-button-v1 { min-width: 46px !important; height: 26px !important; padding: 0 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba( 56, 128, 87, 0.25 ) !important; border-radius: 6px !important; background: #e1f2e6 !important; color: #2f7049 !important; box-shadow: none !important; font-size: 9px !important; font-weight: 750 !important; line-height: 1 !important; cursor: pointer !important; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important; } .message.assistant .ultron-run-button-v1:hover { background: #d2ebda !important; border-color: rgba( 48, 116, 78, 0.42 ) !important; transform: translateY(-1px) !important; box-shadow: 0 3px 8px rgba( 47, 104, 70, 0.08 ) !important; } .message.assistant .ultron-run-button-v1:disabled { opacity: 0.56 !important; cursor: default !important; transform: none !important; } .message.assistant .ultron-run-button-v1.is-unsupported { background: rgba( 233, 237, 239, 0.80 ) !important; border-color: rgba( 100, 112, 120, 0.14 ) !important; color: #7c858b !important; } /* ========================================================== FALLBACK COPY BUTTON ========================================================== */ .message.assistant .ultron-run-copy-v1 { min-width: 46px !important; height: 26px !important; padding: 0 10px !important; border: 1px solid rgba( 73, 99, 118, 0.16 ) !important; border-radius: 6px !important; background: rgba( 255, 255, 255, 0.72 ) !important; color: #526673 !important; font-size: 9px !important; font-weight: 700 !important; cursor: pointer !important; } /* ========================================================== EXECUTION OUTPUT PANEL ========================================================== */ .ultron-run-panel-v1 { border-top: 1px solid #dfe7e2; background: #f7faf8; } .ultron-run-panel-v1.is-error { border-top-color: #eadede; background: #fcf7f7; } /* ========================================================== OUTPUT HEADER ========================================================== */ .ultron-run-result-header-v1 { min-height: 34px; padding: 0 10px 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba( 72, 108, 87, 0.09 ); } .ultron-run-result-status-v1 { display: inline-flex; align-items: center; gap: 7px; color: #477059; font-size: 9px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .ultron-run-result-dot-v1 { width: 6px; height: 6px; border-radius: 50%; background: #67a77d; box-shadow: 0 0 0 3px rgba( 103, 167, 125, 0.11 ); } .ultron-run-panel-v1.is-error .ultron-run-result-status-v1 { color: #965757; } .ultron-run-panel-v1.is-error .ultron-run-result-dot-v1 { background: #c47a7a; box-shadow: 0 0 0 3px rgba( 196, 122, 122, 0.11 ); } /* ========================================================== CLOSE ========================================================== */ .ultron-run-result-close-v1 { width: 24px !important; height: 24px !important; min-width: 24px !important; padding: 0 !important; border: 0 !important; border-radius: 5px !important; background: transparent !important; color: #768079 !important; box-shadow: none !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1 !important; cursor: pointer !important; } .ultron-run-result-close-v1:hover { background: rgba( 58, 77, 65, 0.06 ) !important; } /* ========================================================== OUTPUT TEXT ========================================================== */ .ultron-run-result-body-v1 { width: 100%; max-height: 260px; padding: 13px 15px; overflow: auto; box-sizing: border-box; color: #35473d; font-family: "Cascadia Code", "SFMono-Regular", "Liberation Mono", "DejaVu Sans Mono", Consolas, monospace; font-size: 12px; font-weight: 450; line-height: 1.58; white-space: pre-wrap; overflow-wrap: anywhere; } .ultron-run-panel-v1.is-error .ultron-run-result-body-v1 { color: #8b4e4e; } /* ========================================================== OUTPUT SCROLLBAR ========================================================== */ .ultron-run-result-body-v1::-webkit-scrollbar { width: 7px; height: 7px; } .ultron-run-result-body-v1::-webkit-scrollbar-thumb { background: rgba( 87, 112, 97, 0.25 ); border-radius: 999px; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 720px) { .message.assistant .ultron-run-button-v1, .message.assistant .ultron-run-copy-v1 { min-width: 42px !important; height: 24px !important; padding: 0 8px !important; } .ultron-run-result-body-v1 { max-height: 220px; padding: 12px 13px; font-size: 11.5px; } } /* ULTRON CODE RUN FRONTEND V1 CSS END */ /* ULTRON CODE RUN SIDE WORKSPACE V3 CSS START */ /* ========================================================== EXECUTION WORKSPACE ========================================================== */ .ultron-run-workspace-v3 { position: fixed; top: 62px; right: 0; bottom: 0; width: min( 46vw, 680px ); min-width: 420px; z-index: 6000; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; border-left: 1px solid rgba( 70, 82, 76, 0.16 ); background: rgba( 250, 251, 250, 0.99 ); box-shadow: -24px 0 60px rgba( 45, 54, 49, 0.11 ); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: ultronRunWorkspaceInV3 190ms cubic-bezier( 0.2, 0.8, 0.2, 1 ); } .ultron-run-workspace-v3[hidden] { display: none !important; } /* ========================================================== HEADER ========================================================== */ .ultron-run-workspace-header-v3 { min-height: 78px; padding: 15px 18px 13px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; box-sizing: border-box; border-bottom: 1px solid rgba( 70, 82, 76, 0.10 ); background: rgba( 255, 255, 255, 0.62 ); } .ultron-run-workspace-title-area-v3 { min-width: 0; } .ultron-run-workspace-eyebrow-v3 { margin-bottom: 3px; color: #829087; font-size: 8px; font-weight: 800; letter-spacing: 0.16em; } .ultron-run-workspace-title-v3 { color: #2e3d35; font-size: 16px; font-weight: 720; line-height: 1.25; } .ultron-run-workspace-meta-v3 { margin-top: 4px; color: #728078; font-family: "Cascadia Code", "SFMono-Regular", "Liberation Mono", monospace; font-size: 10px; font-weight: 600; } /* ========================================================== CLOSE ========================================================== */ .ultron-run-workspace-close-v3 { width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba( 72, 88, 78, 0.10 ) !important; border-radius: 10px !important; background: rgba( 255, 255, 255, 0.58 ) !important; color: #66736b !important; box-shadow: none !important; font-size: 21px !important; font-weight: 400 !important; cursor: pointer !important; } .ultron-run-workspace-close-v3:hover { background: rgba( 79, 96, 85, 0.08 ) !important; color: #334139 !important; } /* ========================================================== EXECUTION STATE ========================================================== */ .ultron-run-workspace-state-v3 { min-height: 39px; padding: 0 22px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; border-bottom: 1px solid rgba( 70, 82, 76, 0.08 ); background: #f7f9f7; color: #557061; font-size: 9px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .ultron-run-workspace-dot-v3 { width: 7px; height: 7px; border-radius: 50%; background: #72a984; box-shadow: 0 0 0 4px rgba( 114, 169, 132, 0.10 ); } .ultron-run-workspace-v3.is-running .ultron-run-workspace-dot-v3 { animation: ultronRunPulseV3 1.1s ease-in-out infinite; } .ultron-run-workspace-v3.is-error .ultron-run-workspace-state-v3 { color: #9b5b5b; background: #fbf6f6; } .ultron-run-workspace-v3.is-error .ultron-run-workspace-dot-v3 { background: #c77979; box-shadow: 0 0 0 4px rgba( 199, 121, 121, 0.11 ); } /* ========================================================== OUTPUT BODY ========================================================== */ .ultron-run-workspace-body-v3 { flex: 1 1 auto; min-height: 0; padding: 24px 24px 40px; overflow: auto; box-sizing: border-box; background: #fbfcfb; color: #324138; font-family: "Cascadia Code", "SFMono-Regular", "Liberation Mono", "DejaVu Sans Mono", Consolas, monospace; font-size: 12.5px; font-weight: 450; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; } .ultron-run-workspace-v3.is-error .ultron-run-workspace-body-v3 { background: #fdfafa; color: #864d4d; } /* ========================================================== SCROLLBAR ========================================================== */ .ultron-run-workspace-body-v3::-webkit-scrollbar { width: 8px; height: 8px; } .ultron-run-workspace-body-v3::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba( 86, 105, 94, 0.28 ); background-clip: padding-box; } /* ========================================================== OPEN ANIMATION ========================================================== */ @keyframes ultronRunWorkspaceInV3 { from { opacity: 0; transform: translateX( 36px ); } to { opacity: 1; transform: translateX( 0 ); } } @keyframes ultronRunPulseV3 { 0%, 100% { opacity: 1; transform: scale( 1 ); } 50% { opacity: 0.48; transform: scale( 0.82 ); } } /* ========================================================== MOBILE = REAL FULL PAGE ========================================================== */ @media (max-width: 720px) { .ultron-run-workspace-v3 { top: 0; right: 0; bottom: 0; left: 0; width: 100vw; min-width: 0; height: 100dvh; border-left: 0; box-shadow: none; } .ultron-run-workspace-header-v3 { min-height: 72px; padding: 13px 14px 12px 18px; } .ultron-run-workspace-body-v3 { padding: 21px 18px 38px; font-size: 12px; } } /* ULTRON CODE RUN SIDE WORKSPACE V3 CSS END */ /* ULTRON USER MESSAGE SAME-BUBBLE EDIT V3 CSS START */ /* ========================================================== USER MESSAGE ========================================================== */ .message.user { position: relative; } /* ========================================================== EDIT ROW Height is zero so normal chat spacing does not change. JS gives this row the EXACT bubble width. Because user messages are right aligned + margin-left:auto, Edit begins exactly below bubble's left edge. ========================================================== */ .ultron-user-edit-row-v3 { position: relative; width: auto; height: 0; margin-left: auto; overflow: visible; z-index: 12; } /* ========================================================== EDIT BUTTON ========================================================== */ .ultron-user-edit-trigger-v3 { position: absolute !important; top: 3px !important; left: 0 !important; right: auto !important; width: auto !important; min-width: 0 !important; height: 23px !important; padding: 0 6px !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 4px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: #75827a !important; box-shadow: none !important; font-size: 10px !important; font-weight: 650 !important; line-height: 1 !important; white-space: nowrap; cursor: pointer !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY( -1px ); transition: opacity 120ms ease, visibility 120ms ease, color 120ms ease, background 120ms ease, transform 120ms ease !important; } .ultron-user-edit-trigger-v3 svg { width: 12px; height: 12px; display: block; flex: 0 0 auto; } /* ========================================================== ONLY SHOW WHEN CURSOR IS ON USER MESSAGE ========================================================== */ .message.user:hover .ultron-user-edit-trigger-v3, .message.user:focus-within .ultron-user-edit-trigger-v3 { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY( 0 ); } .ultron-user-edit-trigger-v3:hover { color: #40594a !important; background: rgba( 67, 91, 76, 0.055 ) !important; } /* ========================================================== EDIT MODE SAME ORIGINAL BUBBLE. No textarea. No second card. No edit page. ========================================================== */ .message.user.ultron-user-editing-v3 .ultron-user-edit-row-v3 { display: none; } .message.user.ultron-user-editing-v3 .bubble { cursor: text !important; user-select: text !important; -webkit-user-select: text !important; caret-color: #416d50; outline: 1px solid rgba( 75, 127, 91, 0.30 ) !important; outline-offset: 2px; box-shadow: 0 6px 18px rgba( 54, 92, 65, 0.08 ) !important; white-space: pre-wrap; overflow-wrap: anywhere; } .message.user.ultron-user-editing-v3 .bubble:focus { outline: 1px solid rgba( 65, 119, 82, 0.42 ) !important; } /* Empty message feedback */ .message.user.ultron-user-edit-empty-v3 .bubble { outline-color: rgba( 166, 85, 85, 0.50 ) !important; } /* ========================================================== CANCEL / SEND Sits underneath the SAME message. Width matches bubble. ========================================================== */ .ultron-user-edit-actions-v3 { width: auto; margin-top: 7px; margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 7px; box-sizing: border-box; } /* ========================================================== CANCEL ========================================================== */ .ultron-user-edit-cancel-v3 { min-width: 58px !important; height: 29px !important; padding: 0 11px !important; border: 1px solid rgba( 77, 94, 84, 0.14 ) !important; border-radius: 8px !important; background: rgba( 255, 255, 255, 0.80 ) !important; color: #68766e !important; box-shadow: none !important; font-size: 10.5px !important; font-weight: 700 !important; cursor: pointer !important; } .ultron-user-edit-cancel-v3:hover { background: #f4f7f5 !important; color: #44544a !important; } /* ========================================================== SEND ========================================================== */ .ultron-user-edit-send-v3 { min-width: 54px !important; height: 29px !important; padding: 0 12px !important; border: 1px solid rgba( 68, 126, 83, 0.27 ) !important; border-radius: 8px !important; background: #d7eddd !important; color: #315d3e !important; box-shadow: none !important; font-size: 10.5px !important; font-weight: 730 !important; cursor: pointer !important; } .ultron-user-edit-send-v3:hover { background: #c9e6d1 !important; border-color: rgba( 60, 116, 76, 0.36 ) !important; } /* ========================================================== TOUCH ========================================================== */ @media (hover: none) { .message.user .ultron-user-edit-trigger-v3 { opacity: 0; visibility: hidden; pointer-events: none; } .message.user:focus-within .ultron-user-edit-trigger-v3 { opacity: 1; visibility: visible; pointer-events: auto; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 720px) { .ultron-user-edit-trigger-v3 { height: 22px !important; padding: 0 5px !important; font-size: 9.5px !important; } .ultron-user-edit-cancel-v3, .ultron-user-edit-send-v3 { height: 28px !important; font-size: 10px !important; } } /* ULTRON USER MESSAGE SAME-BUBBLE EDIT V3 CSS END */ /* ULTRON SAME-BUBBLE EDIT ALIGNMENT V3.1 START */ /* * IMPORTANT: * Existing .message.user is a horizontal flex row. * * During editing we add Cancel / Send as another child. * Without this fix: * * [ message bubble ] [ Cancel Send ] * * both share the same horizontal row and the original * user bubble gets pushed toward the left. * * Editing mode must instead behave as one RIGHT-ALIGNED * vertical stack. */ .message.user.ultron-user-editing-v3 { display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: flex-start !important; width: 100% !important; } /* ========================================================== KEEP ORIGINAL MESSAGE BUBBLE ON RIGHT ========================================================== */ .message.user.ultron-user-editing-v3 > .bubble { flex: 0 0 auto !important; align-self: flex-end !important; margin-left: auto !important; margin-right: 0 !important; /* * Do NOT force width:100%. * Keep the existing natural/max-width bubble behavior. */ width: fit-content; max-width: inherit; } /* ========================================================== CANCEL / SEND BELOW THE SAME BUBBLE ========================================================== */ .message.user.ultron-user-editing-v3 > .ultron-user-edit-actions-v3 { position: static !important; flex: 0 0 auto !important; align-self: flex-end !important; margin-top: 7px !important; margin-left: auto !important; margin-right: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 7px !important; } /* ========================================================== NORMAL MESSAGE MUST REMAIN EXACTLY AS BEFORE ========================================================== */ .message.user:not(.ultron-user-editing-v3) > .bubble { /* * No new width / position is imposed here. * Existing ULTRON message styling remains authoritative. */ } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 720px) { .message.user.ultron-user-editing-v3 { align-items: flex-end !important; } .message.user.ultron-user-editing-v3 > .bubble { margin-left: auto !important; margin-right: 0 !important; } .message.user.ultron-user-editing-v3 > .ultron-user-edit-actions-v3 { margin-left: auto !important; margin-right: 0 !important; } } /* ULTRON SAME-BUBBLE EDIT ALIGNMENT V3.1 END */ /* ULTRON USER MESSAGE RIGHT-ALIGN FIX V3.2 START */ /* ---------------------------------------------------------- NORMAL USER MESSAGE Always keep user message on right side. ---------------------------------------------------------- */ .message.user:not(.ultron-user-editing-v3) { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: flex-start !important; } .message.user:not(.ultron-user-editing-v3) > .bubble { align-self: flex-end !important; margin-left: auto !important; margin-right: 0 !important; text-align: left !important; width: fit-content !important; max-width: min(72%, 760px) !important; } /* if edit button / hover action exists, keep it below-right */ .message.user:not(.ultron-user-editing-v3) .ultron-user-edit-trigger, .message.user:not(.ultron-user-editing-v3) .ultron-user-edit-button, .message.user:not(.ultron-user-editing-v3) .ultron-user-message-actions, .message.user:not(.ultron-user-editing-v3) .ultron-user-actions { align-self: flex-end !important; margin-left: auto !important; margin-right: 0 !important; } /* ---------------------------------------------------------- EDIT MODE Bubble should remain on right side. Cancel / Send should stay below bubble. ---------------------------------------------------------- */ .message.user.ultron-user-editing-v3 { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: flex-start !important; } .message.user.ultron-user-editing-v3 > .bubble { align-self: flex-end !important; margin-left: auto !important; margin-right: 0 !important; width: fit-content !important; max-width: min(72%, 760px) !important; } .message.user.ultron-user-editing-v3 > .ultron-user-edit-actions-v3 { align-self: flex-end !important; margin-top: 8px !important; margin-left: auto !important; margin-right: 0 !important; display: flex !important; gap: 8px !important; justify-content: flex-end !important; } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media (max-width: 720px) { .message.user:not(.ultron-user-editing-v3) > .bubble, .message.user.ultron-user-editing-v3 > .bubble { max-width: 88% !important; } } /* ULTRON USER MESSAGE RIGHT-ALIGN FIX V3.2 END */ /* ULTRON EDIT BUTTON V3.3 START */ /* ========================================================== EDIT ROW Exact width follows user bubble from existing JS. Keep zero layout height so normal conversation spacing does not change. ========================================================== */ .message.user > .ultron-user-edit-row-v3 { position: relative !important; height: 0 !important; min-height: 0 !important; margin-top: 0 !important; margin-left: auto !important; margin-right: 0 !important; overflow: visible !important; z-index: 30 !important; } /* ========================================================== EDIT BUTTON OLD: bottom-left + tiny click target. NEW: bottom-right, exactly where SEND appears while editing. Bigger hit-area for easy clicking. ========================================================== */ .message.user .ultron-user-edit-trigger-v3 { position: absolute !important; top: 7px !important; right: 0 !important; bottom: auto !important; left: auto !important; width: auto !important; min-width: 54px !important; height: 30px !important; min-height: 30px !important; padding: 0 11px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; box-sizing: border-box !important; border: 1px solid rgba( 76, 98, 84, 0.13 ) !important; border-radius: 8px !important; background: rgba( 255, 255, 255, 0.92 ) !important; color: #66776d !important; box-shadow: 0 3px 10px rgba( 47, 65, 54, 0.055 ) !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; cursor: pointer !important; /* * Bigger reliable click target. */ pointer-events: none; opacity: 0; visibility: hidden; transform: none !important; transition: opacity 120ms ease, visibility 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease !important; } /* ========================================================== SHOW ON USER MESSAGE HOVER ========================================================== */ .message.user:hover .ultron-user-edit-trigger-v3, .message.user:focus-within .ultron-user-edit-trigger-v3 { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ========================================================== EASY HOVER / CLICK ========================================================== */ .message.user .ultron-user-edit-trigger-v3:hover { background: #f5f8f6 !important; border-color: rgba( 66, 102, 78, 0.23 ) !important; color: #3e5a49 !important; } .message.user .ultron-user-edit-trigger-v3:active { transform: translateY( 1px ) !important; } /* ========================================================== PENCIL ========================================================== */ .message.user .ultron-user-edit-trigger-v3 svg { width: 12px !important; height: 12px !important; flex: 0 0 auto !important; pointer-events: none !important; } .message.user .ultron-user-edit-trigger-v3 span { pointer-events: none !important; } /* ========================================================== WHEN EDITING Edit disappears. Cancel + Send remain below same bubble. ========================================================== */ .message.user.ultron-user-editing-v3 > .ultron-user-edit-row-v3 { display: none !important; } .message.user.ultron-user-editing-v3 > .ultron-user-edit-actions-v3 { align-self: flex-end !important; margin-top: 7px !important; margin-left: auto !important; margin-right: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 7px !important; } /* ========================================================== MAKE EDIT AND SEND VISUALLY SAME SIZE ========================================================== */ .message.user .ultron-user-edit-trigger-v3, .message.user .ultron-user-edit-send-v3 { min-width: 54px !important; height: 30px !important; padding: 0 11px !important; border-radius: 8px !important; box-sizing: border-box !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 720px) { .message.user .ultron-user-edit-trigger-v3 { top: 6px !important; min-width: 52px !important; height: 29px !important; padding: 0 10px !important; } } /* ULTRON EDIT BUTTON V3.3 END */ /* ULTRON EDIT HOVER BRIDGE V3.4 START */ /* * Previously: * * Bubble hover -> Edit visible * * But while moving cursor from bubble down to Edit, * Edit disappeared before cursor could reach it. * * Keep the invisible Edit hit-area alive so cursor can * naturally move from message -> Edit. */ /* ========================================================== INVISIBLE BUT HOVERABLE BUTTON AREA ========================================================== */ .message.user .ultron-user-edit-trigger-v3 { /* * IMPORTANT: * Do not use visibility:hidden or pointer-events:none. * * Opacity alone hides the button visually while keeping * its hover target available. */ visibility: visible !important; pointer-events: auto !important; opacity: 0 !important; z-index: 40 !important; } /* ========================================================== INVISIBLE HOVER BRIDGE Extends click / hover area upward toward the bubble, removing the dead gap between message and Edit button. ========================================================== */ .message.user .ultron-user-edit-trigger-v3::before { content: ""; position: absolute; top: -12px; right: -5px; bottom: -5px; left: -5px; display: block; background: transparent; border: 0; border-radius: 10px; } /* ========================================================== SHOW WHEN: - message is hovered - button itself is hovered - keyboard focus reaches button ========================================================== */ .message.user:hover .ultron-user-edit-trigger-v3, .message.user .ultron-user-edit-trigger-v3:hover, .message.user .ultron-user-edit-trigger-v3:focus-visible { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ========================================================== KEEP EDIT HIDDEN DURING EDIT MODE ========================================================== */ .message.user.ultron-user-editing-v3 .ultron-user-edit-trigger-v3 { opacity: 0 !important; pointer-events: none !important; } /* ULTRON EDIT HOVER BRIDGE V3.4 END */ /* ULTRON EDIT RESEARCH STATE V4.1 CSS START */ /* * Temporary state shown only while an EDITED message * is generating its replacement answer. */ .ultron-edit-research-state-v4 { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding-top: 12px; padding-bottom: 8px; box-sizing: border-box; opacity: 0; animation: ultronEditResearchEnterV4 160ms ease forwards; } .ultron-edit-research-identity-v4 { font-size: 11px; font-weight: 700; letter-spacing: 0.055em; opacity: 0.62; } .ultron-edit-research-activity-v4 { display: inline-flex; align-items: center; gap: 7px; min-height: 25px; font-size: 13px; font-weight: 600; opacity: 0.76; } .ultron-edit-research-dots-v4 { display: inline-flex; align-items: center; gap: 4px; } .ultron-edit-research-dot-v4 { width: 5px; height: 5px; border-radius: 999px; background: currentColor; opacity: 0.25; animation: ultronEditResearchDotV4 1.05s ease-in-out infinite; } .ultron-edit-research-dot-v4:nth-child(2) { animation-delay: 140ms; } .ultron-edit-research-dot-v4:nth-child(3) { animation-delay: 280ms; } @keyframes ultronEditResearchDotV4 { 0%, 70%, 100% { opacity: 0.22; transform: translateY(0); } 35% { opacity: 0.9; transform: translateY(-3px); } } @keyframes ultronEditResearchEnterV4 { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } @media ( prefers-reduced-motion: reduce ) { .ultron-edit-research-state-v4, .ultron-edit-research-dot-v4 { animation: none !important; opacity: 0.75; } } /* ULTRON EDIT RESEARCH STATE V4.1 CSS END */ /* ULTRON EDIT OLD BRANCH HIDE V4.2 START */ /* * While an edited user turn is regenerating: * * - old assistant answer must not remain visible * - later old conversation branch must not remain visible * - only ULTRON Thinking / Researching state is shown */ .ultron-edit-old-branch-hidden-v4 { display: none !important; } /* ULTRON EDIT OLD BRANCH HIDE V4.2 END */ /* ULTRON PREMIUM THINKING ANIMATION V4.4 START */ /* ========================================================== MAIN THINKING STATE ========================================================== */ .ultron-edit-research-state-v4 { position: relative; isolation: isolate; gap: 7px !important; animation: ultronThinkStateEnterV44 220ms cubic-bezier(.2,.8,.2,1) both !important; } /* ========================================================== ULTRON LABEL ========================================================== */ .ultron-edit-research-identity-v4 { position: relative; width: fit-content; letter-spacing: 0.075em !important; opacity: 0.72 !important; } /* tiny breathing dot beside ULTRON */ .ultron-edit-research-identity-v4::after { content: ""; position: absolute; top: 50%; right: -10px; width: 4px; height: 4px; border-radius: 999px; background: currentColor; transform: translateY(-50%); opacity: 0.5; animation: ultronIdentityPulseV44 1.8s ease-in-out infinite; } /* ========================================================== PREMIUM THINKING CAPSULE ========================================================== */ .ultron-edit-research-activity-v4 { position: relative; overflow: hidden; isolation: isolate; display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 34px !important; padding: 5px 12px 5px 9px !important; border: 1px solid color-mix( in srgb, currentColor 12%, transparent ); border-radius: 999px; background: color-mix( in srgb, currentColor 4%, rgba(255,255,255,.76) ); box-shadow: 0 5px 18px rgba(30,40,55,.055), inset 0 1px 0 rgba(255,255,255,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: ultronThinkFloatV44 3.2s ease-in-out infinite; } /* ========================================================== SMALL AI ORB ========================================================== */ .ultron-edit-research-activity-v4::before { content: ""; position: relative; z-index: 2; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: 0.68; box-shadow: 0 0 0 0 color-mix( in srgb, currentColor 22%, transparent ); animation: ultronThinkOrbV44 1.65s ease-in-out infinite; } /* ========================================================== SOFT SHIMMER SWEEP ========================================================== */ .ultron-edit-research-activity-v4::after { content: ""; position: absolute; z-index: -1; top: -70%; bottom: -70%; left: -35%; width: 28%; transform: rotate(18deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.62), transparent ); opacity: 0; animation: ultronThinkSweepV44 2.8s ease-in-out infinite; } /* ========================================================== THINKING / RESEARCHING TEXT ========================================================== */ .ultron-edit-research-label-v4 { position: relative; z-index: 2; font-size: 12.5px !important; font-weight: 650 !important; letter-spacing: 0.012em; white-space: nowrap; background: linear-gradient( 100deg, currentColor 0%, currentColor 38%, rgba(255,255,255,.92) 50%, currentColor 62%, currentColor 100% ); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ultronThinkTextShimmerV44 2.25s linear infinite; } /* ========================================================== THREE CUTE DYNAMIC DOTS ========================================================== */ .ultron-edit-research-dots-v4 { position: relative; z-index: 2; display: inline-flex !important; align-items: center !important; gap: 4px !important; height: 14px; } .ultron-edit-research-dot-v4 { width: 5px !important; height: 5px !important; border-radius: 999px !important; background: currentColor !important; transform-origin: center; opacity: 0.28; animation: ultronThinkDotV44 1.15s cubic-bezier(.4,0,.2,1) infinite !important; } .ultron-edit-research-dot-v4:nth-child(1) { animation-delay: 0ms !important; } .ultron-edit-research-dot-v4:nth-child(2) { animation-delay: 130ms !important; } .ultron-edit-research-dot-v4:nth-child(3) { animation-delay: 260ms !important; } /* ========================================================== ANIMATIONS ========================================================== */ @keyframes ultronThinkStateEnterV44 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes ultronIdentityPulseV44 { 0%, 100% { opacity: 0.25; transform: translateY(-50%) scale(.75); } 50% { opacity: 0.8; transform: translateY(-50%) scale(1.15); } } @keyframes ultronThinkFloatV44 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } } @keyframes ultronThinkOrbV44 { 0% { transform: scale(.82); opacity: .38; box-shadow: 0 0 0 0 color-mix( in srgb, currentColor 26%, transparent ); } 48% { transform: scale(1); opacity: .85; box-shadow: 0 0 0 6px color-mix( in srgb, currentColor 0%, transparent ); } 100% { transform: scale(.82); opacity: .38; box-shadow: 0 0 0 0 color-mix( in srgb, currentColor 0%, transparent ); } } @keyframes ultronThinkDotV44 { 0%, 60%, 100% { transform: translateY(0) scale(.78); opacity: .24; } 30% { transform: translateY(-4px) scale(1.1); opacity: .92; } } @keyframes ultronThinkTextShimmerV44 { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } @keyframes ultronThinkSweepV44 { 0%, 15% { left: -35%; opacity: 0; } 32% { opacity: .45; } 60% { left: 115%; opacity: 0; } 100% { left: 115%; opacity: 0; } } /* ========================================================== ACCESSIBILITY ========================================================== */ @media (prefers-reduced-motion: reduce) { .ultron-edit-research-state-v4, .ultron-edit-research-identity-v4::after, .ultron-edit-research-activity-v4, .ultron-edit-research-activity-v4::before, .ultron-edit-research-activity-v4::after, .ultron-edit-research-label-v4, .ultron-edit-research-dot-v4 { animation: none !important; } .ultron-edit-research-label-v4 { background: none; color: inherit; } } /* ULTRON PREMIUM THINKING ANIMATION V4.4 END */ /* ULTRON THINKING CHARACTER V4.5 CSS START */ /* ========================================================== REMOVE OLD PLAIN ORB Character replaces it. ========================================================== */ .ultron-edit-research-activity-v4::before { content: none !important; } /* ========================================================== CHARACTER HOLDER ========================================================== */ .ultron-thinking-character-v45 { position: relative; flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.7); box-shadow: 0 3px 12px rgba(35,45,55,.08), inset 0 1px 0 rgba(255,255,255,.9); overflow: visible; animation: ultronCharacterFloatV45 2.2s ease-in-out infinite; } /* soft pulse behind character */ .ultron-thinking-character-v45::before { content: ""; position: absolute; inset: 3px; border-radius: inherit; border: 1px solid currentColor; opacity: .11; animation: ultronCharacterPulseV45 1.8s ease-out infinite; } /* tiny orbiting thought particle */ .ultron-thinking-character-v45::after { content: "·"; position: absolute; top: -5px; right: -3px; width: 11px; height: 11px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 2px 6px rgba(30,40,50,.08); font-size: 13px; font-weight: 800; opacity: .7; animation: ultronThoughtOrbitV45 2.5s ease-in-out infinite; } /* ========================================================== ACTUAL EMOJI / MINI HUMAN ========================================================== */ .ultron-thinking-character-emoji-v45 { position: relative; z-index: 2; display: inline-block; font-size: 18px; line-height: 1; transform-origin: 50% 80%; filter: drop-shadow( 0 2px 2px rgba(20,30,40,.08) ); animation: ultronCharacterThinkV45 1.45s ease-in-out infinite; } /* dynamic emoji switch */ .ultron-thinking-character-emoji-v45 .ultron-thinking-character-swap-v45, .ultron-thinking-character-swap-v45 { animation: ultronCharacterSwapV45 360ms cubic-bezier(.22,.85,.35,1.25), ultronCharacterThinkV45 1.45s ease-in-out 360ms infinite; } /* ========================================================== GIVE CAPSULE A LITTLE MORE ROOM ========================================================== */ .ultron-edit-research-activity-v4 { gap: 8px !important; padding-left: 6px !important; min-height: 40px !important; } /* ========================================================== CHARACTER MOTION ========================================================== */ @keyframes ultronCharacterFloatV45 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes ultronCharacterThinkV45 { 0%, 100% { transform: rotate(0deg) scale(1); } 28% { transform: rotate(-5deg) scale(1.03); } 58% { transform: rotate(4deg) scale(.97); } 78% { transform: rotate(-2deg) scale(1.02); } } @keyframes ultronCharacterSwapV45 { 0% { opacity: .15; transform: translateY(5px) rotate(-8deg) scale(.72); } 55% { opacity: 1; transform: translateY(-2px) rotate(4deg) scale(1.16); } 100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); } } @keyframes ultronCharacterPulseV45 { 0% { transform: scale(.78); opacity: .2; } 55% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes ultronThoughtOrbitV45 { 0%, 100% { transform: translate(0, 1px) scale(.75); opacity: .3; } 30% { transform: translate(2px, -3px) scale(1); opacity: .85; } 65% { transform: translate(-2px, -1px) scale(.86); opacity: .55; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { .ultron-thinking-character-v45, .ultron-thinking-character-v45::before, .ultron-thinking-character-v45::after, .ultron-thinking-character-emoji-v45, .ultron-thinking-character-swap-v45 { animation: none !important; } } /* ULTRON THINKING CHARACTER V4.5 CSS END */ /* ULTRON REMOVE OLD THINKING TEXT V4.7 START */ /* * Keep the new animated emoji / mini-human character. * Remove only the old Thinking / Researching text label. */ .ultron-edit-research-label-v4 { display: none !important; } /* ULTRON REMOVE OLD THINKING TEXT V4.7 END */ /* ULTRON LEGACY THINKING REMOVAL V4.8 CSS START */ /* * Character animation only. * No Thinking / Researching text inside the new loader. */ .ultron-edit-research-state-v4 .ultron-edit-research-label-v4 { display: none !important; visibility: hidden !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } /* ULTRON LEGACY THINKING REMOVAL V4.8 CSS END */ /* ULTRON ASSISTANT GREEN FINAL V5.3 START */ /* * ULTRON identity may be rendered through ::before. * JS cannot style pseudo-elements, so CSS owns this. */ .message.assistant:not(.error) .bubble::before { color: #5f8d69 !important; } /* * Main assistant prose. * Do not overwrite code syntax tokens. */ .message.assistant:not(.error) .bubble { color: #284432 !important; } .message.assistant:not(.error) .bubble :is( p, li, blockquote ) { color: #284432 !important; } /* * Preserve links and code/highlighting separately. * Only ordinary text inherits green. */ /* ULTRON ASSISTANT GREEN FINAL V5.3 END */ /* ULTRON HISTORY MENU V2 CSS START */ .history-row > .history-actions { display: none !important; } .history-row { position: relative !important; overflow: visible !important; } .history-row > .history-open { padding-right: 24px !important; } /* ========================================================== SMALL THREE DOT ========================================================== */ .ultron-history-more-v2 { position: absolute !important; right: 5px !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; padding: 0 !important; border: 0 !important; border-radius: 5px !important; background: transparent !important; color: inherit !important; font-size: 12px !important; font-weight: 700 !important; line-height: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .history-row:hover > .ultron-history-more-v2, .history-row:focus-within > .ultron-history-more-v2, .ultron-history-more-v2[ aria-expanded="true" ] { opacity: 0.72 !important; visibility: visible !important; pointer-events: auto !important; } .ultron-history-more-v2:hover, .ultron-history-more-v2[ aria-expanded="true" ] { opacity: 1 !important; background: rgba( 70, 65, 60, 0.07 ) !important; } /* ========================================================== MENU ========================================================== */ .ultron-history-menu-v2 { position: fixed !important; z-index: 100000 !important; width: 142px !important; padding: 4px !important; border: 1px solid rgba( 80, 70, 65, 0.13 ) !important; border-radius: 10px !important; background: #fffdfb !important; box-shadow: 0 10px 30px rgba( 45, 38, 34, 0.13 ) !important; } .ultron-history-menu-v2[hidden] { display: none !important; } .ultron-history-menu-item-v2 { width: 100% !important; height: 31px !important; padding: 0 9px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: inherit !important; display: flex !important; align-items: center !important; text-align: left !important; font-size: 11.5px !important; cursor: pointer !important; } .ultron-history-menu-item-v2:hover { background: rgba( 70, 65, 60, 0.06 ) !important; } .ultron-history-menu-divider-v2 { height: 1px !important; margin: 3px 5px !important; background: rgba( 80, 70, 65, 0.11 ) !important; } .ultron-history-menu-delete-v2 { color: #c94242 !important; } .ultron-history-menu-delete-v2:hover { background: rgba( 201, 66, 66, 0.08 ) !important; } /* ========================================================== INLINE RENAME SAME HISTORY ROW — NO POPUP ========================================================== */ .history-row > .ultron-history-rename-input-v2 { width: calc(100% - 28px) !important; height: 28px !important; margin: 0 !important; padding: 3px 7px !important; box-sizing: border-box !important; border: 1px solid rgba( 80, 120, 155, 0.42 ) !important; border-radius: 7px !important; outline: none !important; background: rgba( 255, 255, 255, 0.76 ) !important; color: inherit !important; font: inherit !important; } .history-row > .ultron-history-rename-input-v2:focus { border-color: rgba( 79, 126, 160, 0.68 ) !important; box-shadow: 0 0 0 2px rgba( 79, 126, 160, 0.08 ) !important; } .history-row > .ultron-history-rename-error-v2 { border-color: rgba( 194, 63, 63, 0.68 ) !important; } .history-row.ultron-history-inline-renaming-v2 > .ultron-history-more-v2 { display: none !important; } /* ULTRON HISTORY MENU V2 CSS END */ /* ULTRON HISTORY RENAME CLEAN V7 CSS START */ .history-row > .ultron-history-editor-v7 { min-width: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; cursor: text !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; caret-color: currentColor !important; box-shadow: inset 0 -1px 0 rgba( 78, 118, 148, 0.55 ) !important; } .history-row.ultron-history-renaming-v7 > .ultron-history-more-v2 { display: none !important; } .ultron-history-rename-saving-v7 { opacity: 0.52 !important; } .ultron-history-rename-error-v7 { opacity: 1 !important; box-shadow: inset 0 -2px 0 #c94242 !important; } /* ULTRON HISTORY RENAME CLEAN V7 CSS END */ /* ULTRON PINNED CHAT INDICATOR V1 START */ /* * Pinned chat: * - subtle permanent highlight * - tiny left accent * - always-visible PIN badge */ .history-row.pinned { position: relative !important; border-radius: 9px !important; } /* Small premium accent at left */ .history-row.pinned::before { content: ""; position: absolute; left: 1px; top: 50%; width: 2px; height: 16px; transform: translateY(-50%); border-radius: 999px; background: #5f8d69; opacity: 0.72; pointer-events: none; } /* * PIN badge stays visible. * Three-dot button remains at far right. */ .history-row.pinned::after { content: "PIN"; position: absolute; right: 27px; top: 50%; transform: translateY(-50%); padding: 1px 4px; border: 1px solid rgba( 95, 141, 105, 0.28 ); border-radius: 999px; background: rgba( 95, 141, 105, 0.09 ); color: #5f8d69; font-size: 7px; font-weight: 700; line-height: 1.35; letter-spacing: 0.45px; pointer-events: none; z-index: 2; } /* Leave room for PIN badge */ .history-row.pinned > .history-open { padding-right: 48px !important; } /* Slightly stronger title for pinned chats */ .history-row.pinned > .history-open { font-weight: 560 !important; } /* ULTRON PINNED CHAT INDICATOR V1 END */ /* ULTRON PINNED SHADOW REMOVE V1 START */ .history-row.pinned, .history-row.pinned::before, .history-row.pinned::after { box-shadow: none !important; filter: none !important; } /* ULTRON PINNED SHADOW REMOVE V1 END */ /* ULTRON PINNED HIGHLIGHT REMOVE V1 START */ .history-row.pinned:not(.active) { background: transparent !important; box-shadow: none !important; } /* keep PIN badge + left indicator unchanged */ /* ULTRON PINNED HIGHLIGHT REMOVE V1 END */ /* ULTRON COMPACT TOP HEADER V2 START */ /* ========================================================== SMALL MAIN TOP HEADER ========================================================== */ .main-panel > .topbar { height:40px !important; min-height:40px !important; flex:0 0 40px !important; padding: 0 10px 0 14px !important; } /* ========================================================== LEFT ULTRON ========================================================== */ .main-panel > .topbar .chat-title-wrap { gap:0 !important; } .main-panel > .topbar .chat-title-wrap strong { font-size:11px !important; line-height:1.1 !important; } .main-panel > .topbar .subtitle-line { font-size:8px !important; line-height:1.1 !important; } .main-panel > .topbar .status-dot { width:5px !important; height:5px !important; } /* ========================================================== RIGHT USER BOX ========================================================== */ .main-panel > .topbar .user-chip { min-height:28px !important; gap:5px !important; padding: 1px 4px !important; border-radius: 7px !important; } .main-panel > .topbar .user-avatar { width:22px !important; height:22px !important; min-width:22px !important; min-height:22px !important; font-size:9px !important; } .main-panel > .topbar .user-chip-copy { gap:0 !important; } .main-panel > .topbar .user-chip-copy strong { font-size:9px !important; line-height:1.1 !important; } .main-panel > .topbar .user-chip-copy small { font-size:7px !important; line-height:1.1 !important; } .main-panel > .topbar .chevron { font-size:8px !important; } /* User dropdown follows compact header */ .user-popover { top:38px !important; } /* ========================================================== WELCOME / LOGO CENTER LOCK Do not move welcome toward the top. ========================================================== */ #chatView .welcome { min-height:55vh !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; margin-left:auto !important; margin-right:auto !important; } #chatView .hero-logo { margin-left:auto !important; margin-right:auto !important; } /* ULTRON COMPACT TOP HEADER V2 END */ /* ULTRON STOP GENERATION V4.13 CSS START */ /* * Keep the existing send-button shell. * Only replace the ↑ with a small square while thinking. */ .send-button.ultron-stop-generation-v413 { display:grid !important; place-items:center !important; cursor:pointer !important; opacity:1 !important; } /* square Stop symbol */ .send-button.ultron-stop-generation-v413::before { content:""; width:10px; height:10px; display:block; border-radius:2px; background:currentColor; pointer-events:none; } /* ULTRON STOP GENERATION V4.13 CSS END */ /* ULTRON STOP SQUARE + FOLLOW-UP FOCUS V4.14 CSS START */ /* ========================================================== STOP BUTTON Existing click/abort logic remains V4.13. Only the OUTER button changes from circle -> square. ========================================================== */ .send-button.ultron-stop-generation-v413 { /* * Override original: * border-radius:50% */ border-radius: 7px !important; } /* * Keep the actual Stop symbol centered and compact. */ .send-button.ultron-stop-generation-v413::before { width: 9px !important; height: 9px !important; border-radius: 1.5px !important; } /* ========================================================== FOLLOW-UP TOP FOCUS Temporary bottom runway gives the scroll container enough room to place the newest user turn near the top. Active only while a follow-up request is pending. ========================================================== */ #chatView .conversation.ultron-followup-focus-v414 { padding-bottom: 64vh !important; } /* Smooth programmatic repositioning */ #chatView .chat-stage { scroll-padding-top: 52px; } /* Mobile keeps a slightly smaller runway */ @media(max-width:820px) { #chatView .conversation.ultron-followup-focus-v414 { padding-bottom: 56vh !important; } } /* ULTRON STOP SQUARE + FOLLOW-UP FOCUS V4.14 CSS END */ /* ULTRON STOP BUTTON TRUE SQUARE V4.15 START */ /* * IMPORTANT: * * Premium composer owns #sendButton using ID selectors. * Therefore stop-state must also use #sendButton + class. * * Normal send state is NOT changed. */ /* ========================================================== OUTER STOP BUTTON Circle -> true compact rounded square ========================================================== */ #sendButton.ultron-stop-generation-v413 { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; /* * True rounded-square shell. */ border-radius: 8px !important; /* * Remove the old radial circular send artwork. * * Keep the existing premium dark/red identity, * but make the entire control rectangular. */ background: linear-gradient( 145deg, #17191d 0%, #090a0c 58%, #050506 100% ) !important; border: 1px solid rgba( 255, 45, 45, .78 ) !important; box-shadow: inset 0 1px 1px rgba( 255, 255, 255, .15 ), inset 0 -1px 2px rgba( 0, 0, 0, .72 ), 0 0 5px rgba( 255, 20, 20, .20 ) !important; overflow: hidden !important; } /* ========================================================== STOP SYMBOL Kill premium paper-plane mask completely. ========================================================== */ #sendButton.ultron-stop-generation-v413::before { content: "" !important; /* * Old send icon uses inset:8px !important. * Remove that owner first. */ inset: auto !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 9px !important; height: 9px !important; transform: translate( -50%, -50% ) !important; /* * Completely remove paper-plane SVG mask. */ -webkit-mask-image: none !important; mask-image: none !important; -webkit-mask: none !important; mask: none !important; background: linear-gradient( 145deg, #ffffff 0%, #dedfe2 55%, #a7a9ad 100% ) !important; border-radius: 2px !important; filter: none !important; pointer-events: none !important; z-index: 4 !important; } /* ========================================================== INNER REFLECTION Circle -> same rounded-square geometry ========================================================== */ #sendButton.ultron-stop-generation-v413::after { inset: 2px !important; border-radius: 6px !important; border: 1px solid rgba( 255, 255, 255, .09 ) !important; box-shadow: inset 0 1px 2px rgba( 255, 255, 255, .05 ) !important; } /* ========================================================== STOP HOVER Keep it stable — no circle illusion from scaling. ========================================================== */ #sendButton.ultron-stop-generation-v413:hover { transform: translateY(-1px) !important; border-radius: 8px !important; } /* Press feedback */ #sendButton.ultron-stop-generation-v413:active { transform: scale(.95) !important; border-radius: 8px !important; } /* ========================================================== MOBILE Only stop state. ========================================================== */ @media(max-width:520px) { #sendButton.ultron-stop-generation-v413 { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; border-radius: 8px !important; } #sendButton.ultron-stop-generation-v413::after { border-radius: 6px !important; } } /* ULTRON STOP BUTTON TRUE SQUARE V4.15 END */ /* ULTRON ACCOUNT HEADER CLEAN V1 START */ /* Remove only the explanatory line below Account */ .settings-section[data-settings-panel="users"] .settings-section-header p { display:none !important; } /* Remove only the top-right Login/Logout button */ .settings-section[data-settings-panel="users"] #createUserFromSettings { display:none !important; } /* Keep heading spacing neat after removal */ .settings-section[data-settings-panel="users"] .settings-section-header { margin-bottom:24px !important; } /* ULTRON ACCOUNT HEADER CLEAN V1 END */ /* ULTRON MESSAGE STYLE OPTION HIDE V1 START */ /* * Remove only the Message Style / Conversation Appearance * setting from Appearance. */ .ultron-message-style-section { display:none !important; } /* * Safety for the original Message design control, * if it exists separately in the appearance grid. */ label.customize-card:has(#uiMessageStyle) { display:none !important; } /* ULTRON MESSAGE STYLE OPTION HIDE V1 END */ /* ULTRON MESSAGE HUB V1 CSS START */ /* * Group + direct message hub. * Uses only existing theme variables. * Logo/theme system is untouched. */ .ultron-thread-section-label-v1 { padding: 14px 10px 6px; color: var(--muted-2); font-size: 9px; font-weight: 750; letter-spacing: .10em; } .ultron-group-thread-v1 { margin-bottom: 2px; } .ultron-group-avatar-v1 { background: var(--panel-3) !important; color: var(--text) !important; border: 1px solid var(--line); font-size: 17px; } .thread-item.active .ultron-group-avatar-v1 { border-color: var(--accent); } .thread-messages .dm:not(.mine) { align-self: flex-start; } .ultron-group-dm-v1 { display: flex; flex-direction: column; gap: 4px; } .ultron-dm-sender-v1 { display: block; color: var(--text); font-size: 9.5px; font-weight: 750; letter-spacing: .01em; } .ultron-group-dm-v1.mine .ultron-dm-sender-v1 { text-align: right; color: var(--muted); } .ultron-dm-text-v1 { overflow-wrap: anywhere; } .ultron-thread-chat-empty-v1 { margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; color: var(--muted); } .ultron-thread-chat-empty-v1 strong { color: var(--text); font-size: 12px; } .ultron-thread-chat-empty-v1 span { max-width: 320px; font-size: 10px; line-height: 1.5; } /* * Keep message sidebar usable * even when many ULTRON users exist. */ #threadsList { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } #threadsList::-webkit-scrollbar { width: 6px; } #threadsList::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; } /* ULTRON MESSAGE HUB V1 CSS END */ /* ULTRON MESSAGE UX V2 CSS START */ /* * Only Message Hub presentation. * Existing global chat/theme/logo owners are untouched. */ #messagesView .thread-active { grid-template-rows: 58px minmax(0, 1fr) auto; } /* ---------------------------------------------------------- ULTRON GROUP LOGO ---------------------------------------------------------- */ #messagesView .ultron-message-logo-wrap-v2 { overflow:hidden !important; padding:0 !important; background:transparent !important; border:1px solid var(--line) !important; } #messagesView .ultron-message-logo-v2 { width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; display:block !important; border-radius:50% !important; } /* ---------------------------------------------------------- MESSAGE ROW name/date/edit are OUTSIDE the bubble ---------------------------------------------------------- */ #messagesView .thread-messages { gap:14px; } #messagesView .ultron-dm-row-v2 { width:min(72%, 620px); align-self:flex-start; display:flex; flex-direction:column; align-items:flex-start; gap:5px; } #messagesView .ultron-dm-row-v2.mine { align-self:flex-end; align-items:flex-end; } #messagesView .ultron-dm-meta-v2 { min-height:18px; display:flex; align-items:center; gap:7px; padding:0 3px; color:var(--muted); font-size:8.5px; line-height:1.2; } #messagesView .ultron-dm-row-v2.mine .ultron-dm-meta-v2 { justify-content:flex-end; } #messagesView .ultron-dm-meta-v2 strong { color:var(--text); font-size:9px; font-weight:750; } #messagesView .ultron-dm-meta-v2 span { color:var(--muted-2); font-size:8px; } /* ---------------------------------------------------------- EDIT ---------------------------------------------------------- */ #messagesView .ultron-dm-edit-v2 { height:20px; border:0; border-radius:6px; background:transparent; color:var(--muted); padding:0 5px; font-size:8px; font-weight:650; cursor:pointer; opacity:0; transition: opacity .12s ease, background .12s ease, color .12s ease; } #messagesView .ultron-dm-row-v2:hover .ultron-dm-edit-v2, #messagesView .ultron-dm-row-v2.editing .ultron-dm-edit-v2 { opacity:1; } #messagesView .ultron-dm-edit-v2:hover { background:var(--hover); color:var(--text); } /* ---------------------------------------------------------- ONLY actual message owns bubble ---------------------------------------------------------- */ #messagesView .ultron-dm-bubble-v2 { max-width:100%; padding:9px 11px; border-radius:12px; background:var(--panel-2); color:var(--text); font-size:12px; line-height:1.5; overflow-wrap:anywhere; } #messagesView .ultron-dm-row-v2.mine .ultron-dm-bubble-v2 { background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .17); } #messagesView .ultron-dm-text-v2 { white-space:normal; overflow-wrap:anywhere; } /* ---------------------------------------------------------- FILE MESSAGE ---------------------------------------------------------- */ #messagesView .ultron-dm-file-v2 { min-width:190px; max-width:320px; display:flex; align-items:center; gap:9px; margin-top:7px; padding:8px 9px; border: 1px solid var(--line); border-radius:9px; background: var(--surface); color: var(--text); text-decoration:none; } #messagesView .ultron-dm-text-v2 + .ultron-dm-file-v2 { margin-top:8px; } #messagesView .ultron-dm-file-v2:hover { background:var(--hover); } #messagesView .ultron-dm-file-icon-v2 { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:8px; background:var(--panel-3); color:var(--text); font-size:14px; font-weight:700; } #messagesView .ultron-dm-file-copy-v2 { min-width:0; display:flex; flex-direction:column; gap:2px; } #messagesView .ultron-dm-file-copy-v2 strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9.5px; } #messagesView .ultron-dm-file-copy-v2 small { color:var(--muted); font-size:8px; } /* ---------------------------------------------------------- INLINE EDITOR ---------------------------------------------------------- */ #messagesView .ultron-dm-row-v2.editing .ultron-dm-bubble-v2 { width:min(430px, 70vw); } #messagesView .ultron-dm-edit-input-v2 { width:100%; min-height:76px; max-height:220px; resize:vertical; border: 1px solid var(--line-strong); border-radius:8px; outline:0; background:var(--surface); color:var(--text); padding:9px 10px; font-size:12px; line-height:1.45; } #messagesView .ultron-dm-edit-input-v2:focus { border-color: rgba(var(--accent-rgb), .55); } #messagesView .ultron-dm-edit-actions-v2 { display:flex; justify-content:flex-end; gap:6px; margin-top:7px; } #messagesView .ultron-dm-edit-actions-v2 button { height:28px; border: 1px solid var(--line); border-radius:7px; background: var(--surface); color: var(--text); padding:0 9px; font-size:9px; font-weight:650; cursor:pointer; } #messagesView .ultron-dm-edit-actions-v2 button:hover { background:var(--hover); } #messagesView .ultron-dm-edit-actions-v2 button.save { border-color: rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .10); } #messagesView .ultron-dm-edit-file-note-v2 { margin-top:6px; color:var(--muted); font-size:8px; } /* ---------------------------------------------------------- MESSAGE COMPOSER ATTACHMENT ---------------------------------------------------------- */ #messagesView .thread-composer { min-height:64px; align-items:flex-end; padding:10px 12px; } #messagesView .ultron-thread-input-stack-v2 { min-width:0; flex:1; display:flex; flex-direction:column; gap:5px; } #messagesView .ultron-thread-input-stack-v2 #threadInput { width:100%; flex:none; } #messagesView .ultron-thread-attach-v2 { width:36px; height:40px; flex:0 0 36px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; } #messagesView .ultron-thread-attach-v2:hover { background:var(--hover); color:var(--text); } #messagesView .ultron-thread-attachment-chip-v2 { width:max-content; max-width:100%; display:flex; align-items:center; gap:7px; padding:5px 6px 5px 8px; border: 1px solid var(--line); border-radius:7px; background: var(--panel-3); color: var(--muted); font-size:8.5px; } #messagesView .ultron-thread-attachment-chip-v2 span { max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #messagesView .ultron-thread-attachment-chip-v2 button { width:20px; height:20px; border:0; border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; } #messagesView .ultron-thread-attachment-chip-v2 button:hover { background:var(--hover); color:var(--text); } @media(max-width:820px) { #messagesView .ultron-dm-row-v2 { width:min(86%, 620px); } #messagesView .ultron-dm-file-v2 { min-width:160px; max-width:260px; } } /* ULTRON MESSAGE UX V2 CSS END */ /* ULTRON MESSAGE RIGHT CLICK EDIT V2.1 CSS START */ /* ========================================================== USERNAME — ABOVE MESSAGE ========================================================== */ #messagesView .ultron-dm-meta-v2 { min-height:auto !important; padding: 0 4px !important; margin-bottom: 1px !important; display:flex !important; align-items:center !important; color: var(--muted) !important; } #messagesView .ultron-dm-meta-v2 strong { color: var(--text) !important; font-size: 9px !important; font-weight: 750 !important; } /* * Own sender name stays aligned with * own/right-side message. */ #messagesView .ultron-dm-row-v2.mine .ultron-dm-meta-v2 { align-self: flex-end !important; justify-content: flex-end !important; } /* ========================================================== DATE + TIME — BELOW MESSAGE ========================================================== */ #messagesView .ultron-dm-time-v2 { padding: 0 4px; margin-top: 1px; color: var(--muted-2); font-size: 8px; font-weight: 500; line-height: 1.25; white-space: nowrap; } #messagesView .ultron-dm-row-v2:not(.mine) .ultron-dm-time-v2 { align-self: flex-start; } #messagesView .ultron-dm-row-v2.mine .ultron-dm-time-v2 { align-self: flex-end; text-align: right; } /* ========================================================== OLD VISIBLE/HOVER EDIT CONTROL MUST NEVER SHOW ========================================================== */ #messagesView .ultron-dm-edit-v2 { display: none !important; } /* ========================================================== RIGHT CLICK MENU ========================================================== */ .ultron-dm-context-menu-v2 { position: fixed; z-index: 1000; min-width: 132px; padding: 5px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-2); box-shadow: 0 10px 30px rgba(0,0,0,.14); } .ultron-dm-context-menu-v2 button { width: 100%; height: 32px; display: flex; align-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--text); padding: 0 10px; text-align: left; font-size: 10px; font-weight: 600; cursor: pointer; } .ultron-dm-context-menu-v2 button:hover { background: var(--hover); } /* * Right-click enabled on own message. * No permanent Edit icon/text is shown. */ #messagesView .ultron-dm-own-bubble-v2 { cursor: default; } /* ULTRON MESSAGE RIGHT CLICK EDIT V2.1 CSS END */ /* ULTRON MESSAGE HUB BUBBLE COLORS V2.5 START */ /* * MESSAGE HUB ONLY * * Received message = white * Own/sent message = light green * * Main ULTRON chat is intentionally untouched. */ #messagesView .ultron-dm-bubble-v2 { background: #ffffff !important; background-image: none !important; } /* Current logged-in user's sent message */ #messagesView .ultron-dm-bubble-v2.ultron-dm-own-bubble-v2, #messagesView .ultron-dm-own-bubble-v2 { background: #e7f6e9 !important; background-image: none !important; } /* ULTRON MESSAGE HUB BUBBLE COLORS V2.5 END */ /* ULTRON MESSAGE DELETE V2.6 CSS START */ /* * Message Hub right-click destructive action only. * History three-dot menu and Main Chat are untouched. */ #messagesView .ultron-dm-context-delete-v2 { color: #b42318 !important; } #messagesView .ultron-dm-context-delete-v2:hover { color: #8f1d14 !important; background: rgba(180, 35, 24, 0.08) !important; } /* ULTRON MESSAGE DELETE V2.6 CSS END */ /* ULTRON MESSAGE DELETE RED V2.7 START */ .ultron-dm-context-delete-v2 { color: #dc2626 !important; } .ultron-dm-context-delete-v2:hover { color: #b91c1c !important; background: rgba(220, 38, 38, 0.08) !important; } /* ULTRON MESSAGE DELETE RED V2.7 END */ /* ULTRON MESSAGE HUB COMPOSER COLOR V2.8 START */ /* * Message Hub composer only. * Main ULTRON chat composer is untouched. */ #messagesView input[placeholder^="Message "], #messagesView textarea[placeholder^="Message "] { background: #eef4ef !important; color: #26352b !important; border-color: #d3ddd5 !important; caret-color: #26352b !important; } #messagesView input[placeholder^="Message "]::placeholder, #messagesView textarea[placeholder^="Message "]::placeholder { color: #7f8b82 !important; opacity: 1 !important; } #messagesView input[placeholder^="Message "]:focus, #messagesView textarea[placeholder^="Message "]:focus { background: #f2f6f2 !important; color: #26352b !important; border-color: #9fb6a4 !important; outline: none !important; } /* ULTRON MESSAGE HUB COMPOSER COLOR V2.8 END */ /* ULTRON MESSAGE AREA PATTERN V2.9 START */ /* * MESSAGE HUB CHAT AREA ONLY. * * Sent/received bubbles remain unchanged. * Bottom message composer remains unchanged. * Main ULTRON chat remains unchanged. */ #threadMessages { background-color: #f5f4f1 !important; background-image: url("./ultron_message_background.png") !important; background-repeat: repeat !important; background-size: 206px 227px !important; background-position: left top !important; background-attachment: local !important; } /* ULTRON MESSAGE AREA PATTERN V2.9 END */ /* ULTRON MESSAGE BACKGROUND GRADIENT V3.0 START */ /* * Message Hub chat area only. * * Uploaded reference colors: * top #B0BAC4 * middle #C8C1C6 * bottom #D6B9B0 */ #threadMessages { background-color: #c8c1c6 !important; background-image: linear-gradient( 180deg, #b0bac4 0%, #bcc0c7 28%, #c8c1c6 52%, #cdbfc0 72%, #d6b9b0 100% ) !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; background-position: center !important; background-attachment: local !important; } /* ULTRON MESSAGE BACKGROUND GRADIENT V3.0 END */ /* ULTRON MESSAGE WHITE BACKGROUND V3.1 START */ #threadMessages { background: #ffffff !important; background-image: none !important; } /* ULTRON MESSAGE WHITE BACKGROUND V3.1 END */ /* ULTRON MESSAGE SURROUND COLOR V3.3 START */ /* * Message Hub surroundings only. * * Premium cool blue-grey: * #EEF2F6 * * Actual conversation stays white. */ #messagesView { background: #eef2f6 !important; } /* * Left user panel, * top conversation header, * bottom composer surrounding strip. */ #messagesView :has(#threadMessages) > :not(#threadMessages):not(:has(#threadMessages)) { background-color: #eef2f6 !important; background-image: none !important; } /* Actual message area */ #threadMessages { background: #ffffff !important; background-image: none !important; } /* Softer premium separators */ #messagesView :has(> #threadMessages) { border-color: #dce3ea !important; } /* ULTRON MESSAGE SURROUND COLOR V3.3 END */ /* ULTRON MESSAGE PREMIUM LAYOUT V3.5 START */ /* ========================================================== PAGE ========================================================== */ #messagesView > .messages-page > .page-heading { display: none !important; } #messagesView .messages-page { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 12px 16px 16px !important; overflow: hidden !important; } /* ========================================================== MAIN MESSAGE CARD ========================================================== */ #messagesView .messages-layout { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; display: grid !important; grid-template-columns: 190px minmax(0, 1fr) !important; overflow: hidden !important; border: 1px solid #dce3ea !important; border-radius: 15px !important; background: #ffffff !important; box-shadow: 0 4px 18px rgba(44, 62, 80, 0.045) !important; } /* ========================================================== LEFT PANEL ========================================================== */ #messagesView .threads-panel { min-width: 0 !important; border-right: 1px solid #dce3ea !important; background: #f4f7fa !important; overflow: hidden !important; } /* * Duplicate "Messages" heading not needed. * Main application topbar already says Messages. */ #messagesView .threads-head { display: none !important; } #messagesView .threads-list { min-height: 0 !important; padding: 10px 8px !important; overflow-y: auto !important; } /* Group / individual rows */ #messagesView .thread-item { width: 100% !important; min-height: 46px !important; padding: 7px 8px !important; gap: 8px !important; border: 1px solid transparent !important; border-radius: 10px !important; background: transparent !important; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease !important; } #messagesView .thread-item:hover { background: rgba(255,255,255,.72) !important; } #messagesView .thread-item.active { background: #ffffff !important; border-color: #e1e7ec !important; box-shadow: 0 2px 8px rgba(50, 67, 80, .055) !important; } /* Smaller avatars */ #messagesView .thread-item .user-row-avatar { width: 29px !important; height: 29px !important; min-width: 29px !important; flex: 0 0 29px !important; font-size: 10px !important; } /* Group logo */ #messagesView .thread-item .ultron-message-logo-wrap-v2 { width: 29px !important; height: 29px !important; min-width: 29px !important; flex: 0 0 29px !important; } #messagesView .thread-item-copy { gap: 1px !important; } #messagesView .thread-item-copy strong { font-size: 10px !important; line-height: 1.25 !important; } #messagesView .thread-item-copy span { font-size: 8.5px !important; line-height: 1.25 !important; } /* DIRECT MESSAGES */ #messagesView .ultron-thread-section-label-v1 { margin: 14px 7px 6px !important; padding: 0 !important; font-size: 7.5px !important; line-height: 1 !important; letter-spacing: .11em !important; color: #8a96a0 !important; } /* ========================================================== RIGHT CHAT PANEL ========================================================== */ #messagesView .thread-panel { min-width: 0 !important; min-height: 0 !important; background: #ffffff !important; } #messagesView .thread-active { width: 100% !important; height: 100% !important; min-height: 0 !important; grid-template-rows: 54px minmax(0, 1fr) 76px !important; background: #ffffff !important; } /* ========================================================== CHAT HEADER ========================================================== */ #messagesView .thread-head { min-height: 54px !important; height: 54px !important; padding: 0 16px !important; gap: 9px !important; background: #f8fafc !important; border-bottom: 1px solid #e1e7ec !important; } #messagesView .thread-head .user-row-avatar { width: 31px !important; height: 31px !important; min-width: 31px !important; flex: 0 0 31px !important; font-size: 10px !important; } #messagesView .thread-head strong { font-size: 11px !important; line-height: 1.25 !important; } #messagesView .thread-head span { font-size: 8px !important; line-height: 1.25 !important; } /* ========================================================== MESSAGE AREA ========================================================== */ #messagesView #threadMessages { min-height: 0 !important; padding: 18px 22px 24px !important; gap: 15px !important; background: #ffffff !important; background-image: none !important; overflow-y: auto !important; scrollbar-width: thin !important; } #messagesView #threadMessages::-webkit-scrollbar { width: 6px !important; } #messagesView #threadMessages::-webkit-scrollbar-thumb { background: #dce3e8 !important; border-radius: 10px !important; } /* Slightly more readable message layout */ #messagesView .ultron-dm-row-v2 { width: min(68%, 600px) !important; gap: 4px !important; } #messagesView .ultron-dm-bubble-v2 { padding: 9px 12px !important; border-radius: 12px !important; font-size: 12px !important; line-height: 1.45 !important; } /* ========================================================== BOTTOM COMPOSER AREA ========================================================== */ #messagesView #threadForm { min-height: 76px !important; height: 76px !important; padding: 11px 14px !important; gap: 9px !important; align-items: center !important; background: #f4f7fa !important; border-top: 1px solid #dfe5ea !important; } /* attachment + input stack */ #messagesView .ultron-thread-input-stack-v2 { flex: 1 1 auto !important; min-width: 0 !important; } /* Actual typing box */ #messagesView #threadInput { width: 100% !important; height: 50px !important; min-height: 50px !important; padding: 0 16px !important; border: 1px solid #d5e0d8 !important; border-radius: 13px !important; background: #eef5f0 !important; color: #26352b !important; caret-color: #26352b !important; font-size: 12.5px !important; box-shadow: inset 0 1px 1px rgba(35, 52, 42, .015) !important; } #messagesView #threadInput::placeholder { color: #7c8a81 !important; opacity: 1 !important; } #messagesView #threadInput:focus { border-color: #aebfb2 !important; background: #f2f7f3 !important; outline: none !important; box-shadow: 0 0 0 2px rgba(129, 157, 137, .08) !important; } /* Attach button */ #messagesView #threadAttachButton { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; border-radius: 10px !important; } /* Send */ #messagesView #threadForm > .send-button { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; } /* ========================================================== EMPTY STATE ========================================================== */ #messagesView .thread-empty { background: #ffffff !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 820px) { #messagesView .messages-page { padding: 8px !important; } #messagesView .messages-layout { grid-template-columns: 1fr !important; height: 100% !important; } #messagesView .threads-panel { max-height: 150px !important; border-right: 0 !important; border-bottom: 1px solid #dce3ea !important; } #messagesView .thread-active { grid-template-rows: 50px minmax(0, 1fr) 68px !important; } #messagesView #threadForm { height: 68px !important; min-height: 68px !important; padding: 8px 10px !important; } #messagesView #threadInput { height: 46px !important; min-height: 46px !important; } } /* ULTRON MESSAGE PREMIUM LAYOUT V3.5 END */ /* ULTRON MESSAGE WARM PEARL V3.6 START */ /* * Message Hub surrounding colors only. * Actual message conversation stays pure white. */ /* Whole Message page background */ #messagesView, #messagesView .messages-page { background: #f7f5f2 !important; } /* Main outer message shell */ #messagesView .messages-layout { background: #ffffff !important; border-color: #e5e1db !important; box-shadow: 0 4px 20px rgba(69, 58, 48, .045) !important; } /* Left Group / Direct Messages panel */ #messagesView .threads-panel { background: #f5f3f0 !important; border-right-color: #e5e1db !important; } /* Hover */ #messagesView .thread-item:hover { background: rgba(255,255,255,.65) !important; } /* Selected Group / User */ #messagesView .thread-item.active { background: #ffffff !important; border-color: #e3ded7 !important; box-shadow: 0 2px 8px rgba(73, 61, 50, .05) !important; } /* Current chat top header */ #messagesView .thread-head { background: #faf9f7 !important; border-bottom-color: #e7e2dc !important; } /* Actual message area stays white */ #messagesView #threadMessages, #messagesView .thread-panel { background: #ffffff !important; background-image: none !important; } /* Bottom composer surrounding strip */ #messagesView #threadForm { background: #f7f5f2 !important; border-top-color: #e5e1db !important; } /* Keep existing green typing box */ #messagesView #threadInput { border-color: #d5dfd6 !important; } /* Outer scrollbar tone */ #messagesView #threadMessages::-webkit-scrollbar-thumb { background: #ddd8d2 !important; } /* ULTRON MESSAGE WARM PEARL V3.6 END */ /* ULTRON MESSAGE WARM SAND V3.7 START */ /* * Remove remaining cool-blue feeling from * Message Hub surroundings only. * * Actual conversation remains pure white. */ /* Whole Message page */ #messagesView, #messagesView .messages-page { background: #fbf8f5 !important; } /* Main shell */ #messagesView .messages-layout { background: #ffffff !important; border-color: #e7dcd3 !important; box-shadow: 0 4px 18px rgba(92, 69, 52, .045) !important; } /* LEFT — Group / Direct Messages */ #messagesView .threads-panel { background: #f4ece5 !important; border-right-color: #e7dcd3 !important; } /* Left rows */ #messagesView .thread-item { border-color: transparent !important; } #messagesView .thread-item:hover { background: #faf6f2 !important; } #messagesView .thread-item.active { background: #ffffff !important; border-color: #e8ddd4 !important; box-shadow: 0 2px 8px rgba(88, 65, 49, .045) !important; } /* DIRECT MESSAGES label */ #messagesView .ultron-thread-section-label-v1 { color: #9a8779 !important; } /* TOP current chat header */ #messagesView .thread-head { background: #faf4ef !important; border-bottom-color: #e8ddd4 !important; } /* Main chat itself stays WHITE */ #messagesView .thread-panel, #messagesView #threadMessages, #messagesView .thread-empty { background: #ffffff !important; background-image: none !important; } /* BOTTOM composer surrounding area */ #messagesView #threadForm { background: #f6eee7 !important; border-top-color: #e7dcd3 !important; } /* Keep existing green input box */ #messagesView #threadInput { background: #eef5f0 !important; border-color: #d3dfd5 !important; color: #26352b !important; } /* Scrollbar */ #messagesView #threadMessages::-webkit-scrollbar-thumb { background: #ded3ca !important; } /* ULTRON MESSAGE WARM SAND V3.7 END */ /* ULTRON MESSAGE REMOVE LIGHT BLUE V3.8 START */ /* * Replace remaining light-blue surfaces * with one warm neutral tone. */ /* Left Group / Direct Messages area */ #messagesView .threads-panel { background: #f3eee9 !important; background-image: none !important; border-right-color: #e3d9d1 !important; } /* Current Group / Direct chat header */ #messagesView .thread-head { background: #f3eee9 !important; background-image: none !important; border-bottom-color: #e3d9d1 !important; } /* Bottom area around message textbox */ #messagesView #threadForm { background: #f3eee9 !important; background-image: none !important; border-top-color: #e3d9d1 !important; } /* Keep actual conversation pure white */ #messagesView .thread-panel, #messagesView #threadMessages { background: #ffffff !important; background-image: none !important; } /* Keep selected Group/User clean */ #messagesView .thread-item.active { background: #ffffff !important; border-color: #e2d8d0 !important; } /* Existing green composer input preserved */ #messagesView #threadInput { background: #eef5f0 !important; } /* ULTRON MESSAGE REMOVE LIGHT BLUE V3.8 END */ /* ULTRON MESSAGE COMPOSER COMPACT V4.0 START */ /* * Message Hub bottom composer only. * * Background behind textbox = same white as message area. * Actual textbox keeps existing light-green style. */ /* Remove light-blue/colored bottom strip */ #messagesView #threadForm, #messagesView .thread-composer { height: 60px !important; min-height: 60px !important; padding: 8px 12px !important; gap: 8px !important; background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; border-top-color: #e7e2dc !important; align-items: center !important; } /* Smaller typing box */ #messagesView #threadInput { height: 42px !important; min-height: 42px !important; padding: 0 13px !important; border-radius: 11px !important; font-size: 12px !important; } /* Keep stack aligned */ #messagesView .ultron-thread-input-stack-v2 { flex: 1 1 auto !important; min-width: 0 !important; } /* Slightly smaller attach button */ #messagesView #threadAttachButton { width: 34px !important; height: 34px !important; flex: 0 0 34px !important; } /* Slightly smaller send button */ #messagesView #threadForm > .send-button { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; font-size: 15px !important; } /* Conversation remains pure white */ #messagesView #threadMessages { background: #ffffff !important; background-image: none !important; } /* ULTRON MESSAGE COMPOSER COMPACT V4.0 END */ /* ULTRON MESSAGE COMPOSER WHITE V4.1 START */ /* * Exact Message Hub composer surface owner. * Higher specificity intentionally overrides * the older :has(#threadMessages) surround rule. */ #messagesView #threadActive:has(> #threadMessages) > form#threadForm.thread-composer { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } /* Remove any blue tint from the complete composer row */ #messagesView #threadActive:has(> #threadMessages) > #threadForm { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } /* Keep conversation + composer visually continuous */ #messagesView #threadMessages { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } /* ULTRON MESSAGE COMPOSER WHITE V4.1 END */ /* ULTRON MESSAGE COMPOSER POSITION V4.2 START */ /* * Message Hub composer only. * Remove separator line and move controls slightly downward. */ #messagesView #threadForm, #messagesView .thread-composer { border-top: 0 !important; border-top-color: transparent !important; box-shadow: none !important; } /* Move + / textbox / send slightly toward bottom */ #messagesView #threadForm > * { transform: translateY(4px); } /* Hidden file input does not need movement */ #messagesView #threadFileInput { transform: none !important; } /* ULTRON MESSAGE COMPOSER POSITION V4.2 END */ /* ULTRON REMINDER CALL + NOTIFICATION V1 CSS START */ /* ========================================================== REMINDER PAGE / MODAL ========================================================== */ .ultron-reminder-heading-actions-v1 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .ultron-notification-permission-v1.enabled { border-color: rgba(73, 131, 91, .35) !important; color: #3f7550 !important; background: rgba(95, 141, 105, .08) !important; } .ultron-reminder-modal-card-v1 { width: min(520px, 100%) !important; } .ultron-reminder-delivery-v1 { margin: 2px 0 14px; padding: 0; border: 0; display: grid; gap: 7px; } .ultron-reminder-delivery-v1 legend { margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 650; } .ultron-reminder-delivery-v1 label { position: relative; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; } .ultron-reminder-delivery-v1 label:hover { background: var(--hover); } .ultron-reminder-delivery-v1 label:has(input:checked) { border-color: rgba(var(--accent-rgb), .42); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .05); } .ultron-reminder-delivery-v1 input { width: 15px; height: 15px; accent-color: var(--accent); } .ultron-reminder-delivery-v1 label > span { display: flex; flex-direction: column; gap: 2px; } .ultron-reminder-delivery-v1 strong { color: var(--text); font-size: 11px; } .ultron-reminder-delivery-v1 small { color: var(--muted); font-size: 9px; } .reminder-row.cancelled { opacity: .56; } .reminder-row.cancelled .user-row-copy strong { text-decoration: line-through; } /* ========================================================== FULL SCREEN CALL ========================================================== */ body.ultron-reminder-call-open-v1 { overflow: hidden !important; } .ultron-reminder-call-v1 { position: fixed; inset: 0; z-index: 25000; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; background-color: #0c1117; color: #f4f7f9; isolation: isolate; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); } .ultron-reminder-call-v1[hidden] { display: none !important; } .ultron-reminder-ambient-v1 { position: absolute; top: 18%; left: 50%; width: min(55vw, 520px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, rgba(80, 111, 126, .12) 0%, rgba(80, 111, 126, .04) 44%, transparent 72% ); filter: blur(20px); pointer-events: none; } .ultron-reminder-statusbar-v1 { position: absolute; z-index: 4; top: max(16px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: rgba(240, 245, 248, .58); font-size: 10px; letter-spacing: .035em; } .ultron-reminder-incoming-v1, .ultron-reminder-active-v1 { position: relative; z-index: 2; width: min(520px, 100%); height: 100%; margin: 0 auto; } /* ========================================================== INCOMING SCREEN ========================================================== */ .ultron-reminder-incoming-v1 { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: clamp(78px, 11vh, 120px) 6px clamp(18px, 4vh, 44px); } .ultron-reminder-call-main-v1 { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; } .ultron-reminder-logo-stage-v1, .ultron-reminder-active-logo-v1 { position: relative; display: grid; place-items: center; } .ultron-reminder-logo-stage-v1 { width: 126px; height: 126px; margin-bottom: 24px; } .ultron-reminder-active-logo-v1 { width: 92px; height: 92px; margin: 0 auto 17px; } .ultron-reminder-logo-v1 { position: relative; z-index: 3; width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(196, 214, 222, .18); background: rgba(19, 27, 35, .82); box-shadow: 0 12px 36px rgba(0, 0, 0, .34); overflow: hidden; } .ultron-reminder-logo-v1.small { width: 68px; height: 68px; } .ultron-reminder-logo-v1 img { width: 100%; height: 100%; object-fit: contain; display: block; } .ultron-reminder-pulse-v1 { position: absolute; inset: 0; border: 1px solid rgba(121, 169, 188, .27); border-radius: 50%; opacity: .65; transform: scale(.72); } .ultron-reminder-call-v1.ringing .ultron-reminder-pulse-v1 { animation: ultronReminderBreathV1 2.15s ease-in-out infinite; } .ultron-reminder-call-v1.speaking .ultron-reminder-pulse-v1 { animation: ultronReminderSpeakV1 1.15s ease-in-out infinite; } .ultron-reminder-call-v1.listening .ultron-reminder-pulse-v1 { border-color: rgba(102, 176, 132, .42); animation: ultronReminderListenV1 1.7s ease-in-out infinite; } @keyframes ultronReminderBreathV1 { 0%, 100% { transform: scale(.76); opacity: .25; } 50% { transform: scale(1); opacity: .72; } } @keyframes ultronReminderSpeakV1 { 0%, 100% { transform: scale(.80); opacity: .32; } 45% { transform: scale(.96); opacity: .74; } } @keyframes ultronReminderListenV1 { 0%, 100% { transform: scale(.82); opacity: .30; } 50% { transform: scale(1.04); opacity: .75; } } .ultron-reminder-incoming-v1 h1, .ultron-reminder-active-v1 h1 { margin: 0; color: #f6f8f9; font-weight: 680; letter-spacing: .08em; } .ultron-reminder-incoming-v1 h1 { font-size: clamp(25px, 3vw, 34px); } .ultron-reminder-active-v1 h1 { font-size: 23px; } .ultron-reminder-call-label-v1 { margin-top: 7px; color: rgba(231, 237, 240, .55); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .ultron-reminder-task-v1 { max-width: 460px; margin-top: clamp(34px, 6vh, 58px); padding: 0 14px; color: #f3f5f6; font-size: clamp(19px, 2.7vw, 28px); font-weight: 590; line-height: 1.32; letter-spacing: -.012em; } .ultron-reminder-due-v1 { margin-top: 11px; color: rgba(229, 236, 239, .52); font-size: 11px; } .ultron-reminder-call-controls-v1 { width: min(350px, 88vw); display: grid; grid-template-columns: repeat(2, 1fr); gap: 58px; align-items: end; } .ultron-reminder-call-action-v1 { border: 0; background: transparent; color: #eef2f4; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; } .ultron-reminder-call-circle-v1 { position: relative; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .13); transition: transform .14s ease, filter .14s ease, background .14s ease; } .ultron-reminder-call-action-v1.later .ultron-reminder-call-circle-v1 { background: #303841; } .ultron-reminder-call-action-v1.answer .ultron-reminder-call-circle-v1 { background: #4c7d5d; box-shadow: 0 8px 30px rgba(76, 125, 93, .22); } .ultron-reminder-call-action-v1:hover .ultron-reminder-call-circle-v1 { filter: brightness(1.08); transform: translateY(-2px); } .ultron-reminder-call-action-v1:active .ultron-reminder-call-circle-v1 { transform: scale(.94); } .ultron-reminder-call-circle-v1 svg { width: 25px; height: 25px; fill: currentColor; } .ultron-reminder-call-circle-v1 i { position: absolute; right: 13px; bottom: 10px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(8, 12, 16, .76); color: rgba(255, 255, 255, .76); font-size: 10px; font-style: normal; } .ultron-reminder-call-action-v1 strong { font-size: 11px; font-weight: 570; } /* ========================================================== ACTIVE CALL ========================================================== */ .ultron-reminder-active-v1 { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: clamp(70px, 9vh, 98px) 6px clamp(16px, 3vh, 32px); } .ultron-reminder-active-top-v1 { width: 100%; text-align: center; } .ultron-reminder-active-task-v1 { margin: 25px auto 0; max-width: 430px; padding: 0 14px; color: #eef2f4; font-size: 18px; font-weight: 560; line-height: 1.35; } .ultron-reminder-call-timer-v1 { margin-top: 8px; color: rgba(227, 234, 237, .52); font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .06em; } .ultron-reminder-voice-zone-v1 { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } .ultron-reminder-wave-v1 { height: 44px; display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 13px; } .ultron-reminder-wave-v1 span { width: 3px; height: 10px; border-radius: 4px; background: rgba(143, 181, 196, .65); animation: ultronReminderWaveV1 1.15s ease-in-out infinite; } .ultron-reminder-wave-v1 span:nth-child(2) { animation-delay: .10s; } .ultron-reminder-wave-v1 span:nth-child(3) { animation-delay: .20s; } .ultron-reminder-wave-v1 span:nth-child(4) { animation-delay: .30s; } .ultron-reminder-wave-v1 span:nth-child(5) { animation-delay: .40s; } @keyframes ultronReminderWaveV1 { 0%, 100% { height: 8px; opacity: .35; } 50% { height: 31px; opacity: .92; } } .ultron-reminder-call-v1.listening .ultron-reminder-wave-v1 span { background: rgba(111, 180, 139, .72); } .ultron-reminder-voice-zone-v1 p { margin: 0; color: #eef3f5; font-size: 12px; font-weight: 560; } .ultron-reminder-voice-zone-v1 small { max-width: 390px; margin-top: 7px; color: rgba(225, 232, 235, .42); font-size: 9px; line-height: 1.55; } .ultron-reminder-quick-controls-v1 { width: min(390px, 96vw); display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .ultron-reminder-quick-controls-v1 button { min-width: 0; border: 0; background: transparent; color: rgba(238, 243, 245, .67); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; } .ultron-reminder-quick-controls-v1 button > span { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.10); border-radius: 50%; background: rgba(255,255,255,.055); font-size: 15px; transition: background .14s ease, transform .14s ease; } .ultron-reminder-quick-controls-v1 button.active > span { background: rgba(108, 153, 125, .18); border-color: rgba(108, 153, 125, .32); color: #b9d8c3; } .ultron-reminder-quick-controls-v1 button:active > span { transform: scale(.93); } .ultron-reminder-quick-controls-v1 small { color: inherit; font-size: 8px; } .ultron-reminder-end-v1 { width: min(360px, 92vw); height: 48px; margin-top: 18px; border: 1px solid rgba(192, 93, 93, .28); border-radius: 24px; background: rgba(117, 48, 48, .42); color: #f1d8d8; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .02em; transition: background .14s ease, transform .14s ease; } .ultron-reminder-end-v1:hover { background: rgba(137, 54, 54, .52); } .ultron-reminder-end-v1:active { transform: scale(.98); } /* ========================================================== SNOOZE BOTTOM SHEET ========================================================== */ .ultron-reminder-later-sheet-v1 { position: absolute; z-index: 20; left: 50%; bottom: max( 12px, env(safe-area-inset-bottom) ); transform: translateX(-50%); width: min(470px, calc(100vw - 24px)); padding: 10px 14px 14px; border: 1px solid rgba(255,255,255,.10); border-radius: 20px; background: rgba(24, 30, 37, .98); box-shadow: 0 24px 70px rgba(0,0,0,.42); } .ultron-reminder-later-sheet-v1[hidden] { display: none !important; } .ultron-reminder-sheet-handle-v1 { width: 34px; height: 3px; margin: 0 auto 12px; border-radius: 4px; background: rgba(255,255,255,.18); } .ultron-reminder-sheet-head-v1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 0 2px 13px; } .ultron-reminder-sheet-head-v1 > div { display: flex; flex-direction: column; gap: 3px; } .ultron-reminder-sheet-head-v1 strong { color: #f1f4f5; font-size: 12px; } .ultron-reminder-sheet-head-v1 span { color: rgba(229,235,238,.43); font-size: 9px; } .ultron-reminder-sheet-head-v1 button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); color: rgba(255,255,255,.65); cursor: pointer; } .ultron-reminder-snooze-options-v1 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; } .ultron-reminder-snooze-options-v1 button { min-height: 43px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.05); color: #e7ecee; cursor: pointer; font-size: 10px; transition: background .14s ease, transform .14s ease; } .ultron-reminder-snooze-options-v1 button:hover { background: rgba(255,255,255,.09); } .ultron-reminder-snooze-options-v1 button:active { transform: scale(.96); } /* ========================================================== SMALL SCREEN ========================================================== */ @media (max-width: 600px) { .ultron-reminder-call-controls-v1 { width: min(320px, 92vw); gap: 46px; } .ultron-reminder-call-circle-v1 { width: 64px; height: 64px; } .ultron-reminder-snooze-options-v1 { grid-template-columns: repeat(2, 1fr); } .ultron-reminder-quick-controls-v1 { width: min(350px, 96vw); } } /* ULTRON REMINDER CALL + NOTIFICATION V1 CSS END */ /* ULTRON REMINDER RUNTIME V2 FIX CSS START */ /* * Incoming-call END control. * Existing Later / Answer styling remains untouched. */ .ultron-reminder-call-action-v1.end .ultron-reminder-call-circle-v1 { background: #7f4b4e !important; color: #fff8f8 !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 9px 28px rgba(73,28,31,.22) !important; } .ultron-reminder-call-action-v1.end:hover .ultron-reminder-call-circle-v1 { background: #8d5357 !important; } .ultron-reminder-call-action-v1.end:active .ultron-reminder-call-circle-v1 { transform: scale(.94); } /* ULTRON REMINDER RUNTIME V2 FIX CSS END */ /* ========================================================== ULTRON REMINDER INCOMING REMOVE LATER V2.1 START Incoming reminder call = End + Answer only. ========================================================== */ #reminderLaterButton, .ultron-reminder-later-inline-v2 { display: none !important; } /* * If Later was one of the main call controls, * keep remaining End + Answer balanced. */ .ultron-reminder-call-controls-v1 { justify-content: center !important; gap: 72px !important; } /* ULTRON REMINDER INCOMING REMOVE LATER V2.1 END */ /* ULTRON REMINDER END ANSWER ONLY V2.2 START */ /* * Incoming Reminder Call only: * remove Later. * * Active Reminder Call Snooze remains available. */ #reminderIncomingScreen #reminderLaterButton { display: none !important; } /* * If an earlier Later wrapper exists, * remove only that incoming wrapper. */ #reminderIncomingScreen .ultron-reminder-later-inline-v2 { display: none !important; } /* * Incoming call main actions: * * END ANSWER */ #reminderIncomingScreen .ultron-reminder-call-controls-v1 { width: min(350px, 88vw) !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: end !important; justify-content: center !important; gap: 64px !important; } /* * Keep both true call actions centered. */ #reminderIncomingScreen .ultron-reminder-call-action-v1.end, #reminderIncomingScreen .ultron-reminder-call-action-v1.answer { display: flex !important; align-items: center !important; justify-content: center !important; } /* ULTRON REMINDER END ANSWER ONLY V2.2 END */ /* ULTRON MOBILE RESPONSIVE V1 START */ /* ============================================================ MOBILE-ONLY FINAL RESPONSIVE LAYER ============================================================ Existing desktop CSS remains untouched. This block owns only: - phone/tablet portrait layout - mobile safe areas - mobile touch targets - mobile chat/composer - mobile reminders - mobile messages - mobile settings - mobile modal/auth presentation No application logic is changed. */ /* ============================================================ PHONE / COMPACT TABLET ============================================================ */ @media (max-width: 820px) { html { width:100%; height:100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { width:100%; height:100%; min-width:0; overflow:hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; } button, [role="button"], input, textarea, select { touch-action: manipulation; } /* -------------------------------------------------------- ROOT APP -------------------------------------------------------- */ .app-shell { width:100% !important; max-width: 100vw !important; height: 100vh !important; height: 100dvh !important; min-height: 0 !important; grid-template-columns: minmax(0,1fr) !important; overflow: hidden !important; } .main-panel { width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; } /* -------------------------------------------------------- MOBILE TOP BAR -------------------------------------------------------- */ .topbar { width: 100% !important; min-width: 0 !important; min-height: 56px !important; height: auto !important; flex: 0 0 auto !important; padding: max( 6px, env(safe-area-inset-top) ) max( 10px, env(safe-area-inset-right) ) 6px max( 10px, env(safe-area-inset-left) ) !important; gap: 8px !important; } .topbar-left { min-width: 0; flex: 1 1 auto; } .menu-button { display: inline-grid !important; place-items: center; width: 44px !important; height: 44px !important; flex: 0 0 44px; margin: 0; } .chat-title-wrap { min-width: 0; overflow: hidden; } .chat-title-wrap strong, .subtitle-line { max-width: calc(100vw - 122px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-title-wrap strong { font-size: 13px; } .subtitle-line { font-size: 9px; } .user-chip { min-width: 44px; min-height: 44px; padding: 5px !important; justify-content: center; } .user-avatar { width: 34px !important; height: 34px !important; } .user-chip-copy, .user-chip .chevron { display: none !important; } /* -------------------------------------------------------- SIDEBAR DRAWER -------------------------------------------------------- */ .sidebar { position: fixed !important; z-index: 20000 !important; top: 0 !important; left: 0 !important; bottom: auto !important; width: min( 88vw, 320px ) !important; max-width: 320px !important; height: 100vh !important; height: 100dvh !important; min-height: 0 !important; padding-top: env( safe-area-inset-top ); padding-bottom: env( safe-area-inset-bottom ); overflow: hidden !important; transform: translate3d( -105%, 0, 0 ); transition: transform .22s ease !important; box-shadow: 18px 0 48px rgba(40,30,28,.16) !important; } .sidebar.open { transform: translate3d( 0, 0, 0 ) !important; } .sidebar-top { min-height: 0; overflow: hidden; } .brand-row { min-height: 64px !important; height: auto !important; padding: 8px 14px !important; } .mobile-close { display: inline-grid !important; place-items: center; width: 44px !important; height: 44px !important; margin-left: auto; } .sidebar .search-box { min-height: 44px; height: 44px; margin: 2px 10px 10px; } .sidebar .search-box kbd { display: none; } .sidebar .nav-item { min-height: 44px !important; height: auto !important; padding-top: 8px; padding-bottom: 8px; } .sidebar .history-heading { min-height: 44px !important; height: auto !important; } .sidebar .history-row { min-height: 42px !important; } /* Desktop hides row controls until hover. Touch devices have no reliable hover. */ .sidebar .history-actions { opacity: 1; } .sidebar .history-action { width: 34px; height: 34px; } /* -------------------------------------------------------- MAIN CHAT -------------------------------------------------------- */ #chatView.active-view { width: 100%; min-width: 0; min-height: 0; height: 0; overflow: hidden; } #chatView .chat-stage { width: 100%; min-width: 0; padding: 18px max( 12px, env(safe-area-inset-right) ) 12px max( 12px, env(safe-area-inset-left) ) !important; scroll-padding-bottom: 16px; } #chatView .welcome { width: 100%; min-height: 100% !important; max-width: 100%; padding: 22px 12px 9vh; } #chatView .hero-logo { width: 48px; height: 48px; margin-bottom: 16px; } #chatView .welcome h1 { font-size: clamp( 23px, 7vw, 29px ) !important; line-height: 1.16; } #chatView .welcome p { max-width: 92%; font-size: 12px; line-height: 1.5; } #conversation, #chatView .conversation { width: 100% !important; max-width: none !important; min-width: 0; margin: 0 !important; } #conversation .message { width: 100%; min-width: 0; } #conversation .message.user > .bubble, body[data-ultron-message-style] .message.user .bubble { max-width: 88% !important; overflow-wrap: anywhere; } #conversation .message.assistant > .bubble { width: 100% !important; max-width: none !important; min-width: 0 !important; } #conversation pre, #conversation code, #conversation table, #conversation .code-block { max-width: 100% !important; } #conversation pre, #conversation .code-block { overflow-x: auto !important; overscroll-behavior-x: contain; } #conversation table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* -------------------------------------------------------- CHAT COMPOSER -------------------------------------------------------- */ #chatView .composer-wrap { width: 100% !important; max-width: 100vw !important; padding: 8px max( 8px, env(safe-area-inset-right) ) calc( 7px + env(safe-area-inset-bottom) ) max( 8px, env(safe-area-inset-left) ) !important; overflow: visible !important; } #chatView .composer { width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 54px !important; margin: 0 !important; padding: 6px !important; gap: 4px !important; border-radius: 17px !important; } #chatView .composer textarea { min-width: 0 !important; min-height: 42px !important; max-height: min( 34dvh, 160px ) !important; padding: 10px 4px !important; /* 16px prevents mobile Safari/Chrome focus zoom. */ font-size: 16px !important; line-height: 21px !important; } #chatView .composer-tool, #chatView .send-button { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; flex: 0 0 42px !important; } #chatView .mode-chip { max-width: 62px; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; } #chatView .attachment-chip { width: auto; max-width: calc(100vw - 24px); margin-bottom: 5px; } #chatView .footer-note { margin: 5px 4px 0; padding: 0 4px; font-size: 8.5px; line-height: 1.3; } /* -------------------------------------------------------- CONTENT PAGES -------------------------------------------------------- */ .content-page { width: 100% !important; min-width: 0 !important; padding: 18px max( 12px, env(safe-area-inset-right) ) calc( 22px + env(safe-area-inset-bottom) ) max( 12px, env(safe-area-inset-left) ) !important; } .page-heading { width: 100%; margin: 0 auto 18px !important; gap: 14px !important; align-items: stretch !important; flex-direction: column !important; } .page-heading h2, .modal-header h2 { font-size: 23px !important; line-height: 1.16; } .page-heading p { font-size: 12px; line-height: 1.5; } .primary-button, .secondary-button { min-height: 44px; height: auto; } /* -------------------------------------------------------- REMINDER PAGE -------------------------------------------------------- */ #remindersView .ultron-reminder-heading-actions-v1 { width: 100%; display: grid; grid-template-columns: repeat( 2, minmax(0,1fr) ); gap: 8px; justify-content: stretch; } #remindersView .ultron-reminder-heading-actions-v1 > button { width: 100%; min-width: 0; min-height: 44px; } #reminderList { width: 100%; min-width: 0; } #reminderList .reminder-row { min-width: 0; align-items: flex-start; flex-wrap: wrap; } #reminderList .reminder-row .user-row-main { min-width: 0; flex: 1 1 180px; } #reminderList .reminder-row .user-row-actions { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; } /* -------------------------------------------------------- SETTINGS -------------------------------------------------------- */ #settingsView .settings-page { min-height: 0; padding-bottom: calc( 24px + env(safe-area-inset-bottom) ) !important; } #settingsView .settings-layout { width: 100%; max-width: none; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column; overflow: visible !important; } #settingsView .settings-nav { width: 100%; min-height: 52px; display: flex !important; flex: 0 0 auto; gap: 4px; padding: 7px !important; overflow-x: auto !important; overflow-y: hidden !important; border-right: 0 !important; border-bottom: 1px solid var(--line); -webkit-overflow-scrolling: touch; scrollbar-width: none; } #settingsView .settings-nav::-webkit-scrollbar { display: none; } #settingsView .settings-nav-item { width: auto !important; min-width: max-content; min-height: 38px !important; padding: 8px 11px !important; white-space: nowrap; } #settingsView .settings-detail { width: 100%; min-width: 0; overflow: visible !important; padding: 16px 13px 20px !important; } #settingsView .settings-section-header { flex-direction: column; gap: 12px; } #settingsView .setting-card { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; } #settingsView .setting-card span { text-align: left; } #settingsView .appearance-grid, #settingsView .theme-grid, #settingsView .template-grid, #settingsView .ultron-density-grid { grid-template-columns: 1fr !important; } #settingsView .appearance-footer { flex-direction: column; align-items: stretch; } #settingsView .user-row { align-items: flex-start; flex-wrap: wrap; } #settingsView .user-row-main { flex: 1 1 180px; } #settingsView .user-row-actions { flex-wrap: wrap; justify-content: flex-end; } /* -------------------------------------------------------- MESSAGE HUB Final override for Premium Message Layout V3.5+ -------------------------------------------------------- */ #messagesView { min-width: 0 !important; overflow: hidden !important; } #messagesView .messages-page { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; } #messagesView .messages-layout { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; display: grid !important; grid-template-columns: minmax(0,1fr) !important; grid-template-rows: auto minmax(0,1fr) !important; border: 0 !important; border-radius: 0 !important; overflow: hidden !important; box-shadow: none !important; } #messagesView .threads-panel { width: 100% !important; min-width: 0 !important; min-height: 0 !important; max-height: 164px !important; border-right: 0 !important; border-bottom: 1px solid #dce3ea !important; overflow: hidden !important; } #messagesView .threads-list { width: 100%; min-height: 0 !important; max-height: 164px; padding: 8px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #messagesView .thread-item { min-height: 48px !important; } #messagesView .thread-panel { width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; } #messagesView .thread-active { width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; grid-template-rows: 54px minmax(0,1fr) auto !important; } #messagesView .thread-head { min-height: 54px; padding: 0 11px !important; } #messagesView .thread-messages { min-width: 0; min-height: 0; padding: 14px 10px 12px !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #messagesView .ultron-dm-row-v2 { width: min( 88%, 620px ) !important; max-width: 88% !important; } #messagesView .dm { max-width: 100%; } #messagesView .thread-composer { width: 100%; min-width: 0; min-height: 60px !important; gap: 6px !important; padding: 8px max( 8px, env(safe-area-inset-right) ) calc( 8px + env(safe-area-inset-bottom) ) max( 8px, env(safe-area-inset-left) ) !important; } #messagesView #threadForm > * { transform: none !important; } #messagesView .ultron-thread-input-stack-v2 { min-width: 0 !important; } #messagesView #threadInput { min-width: 0; min-height: 42px; font-size: 16px !important; } #messagesView .ultron-thread-attach-v2, #messagesView .thread-composer .send-button { width: 42px !important; height: 42px !important; min-width: 42px !important; flex: 0 0 42px !important; } #messagesView .ultron-thread-attachment-chip-v2 { max-width: 100% !important; } #messagesView .ultron-thread-attachment-chip-v2 span { max-width: min( 52vw, 240px ) !important; } /* -------------------------------------------------------- GENERIC MODALS -------------------------------------------------------- */ .modal-backdrop { width: 100%; height: 100vh; height: 100dvh; padding: max( 12px, env(safe-area-inset-top) ) max( 10px, env(safe-area-inset-right) ) max( 12px, env(safe-area-inset-bottom) ) max( 10px, env(safe-area-inset-left) ) !important; overflow: hidden; } .modal-card { width: 100% !important; max-width: 520px !important; max-height: calc( 100dvh - max( 24px, env(safe-area-inset-top) ) - max( 24px, env(safe-area-inset-bottom) ) ); padding: 18px !important; overflow-y: auto; overscroll-behavior: contain; } .modal-header { margin-bottom: 16px; gap: 12px; } .modal-header .icon-btn { width: 44px !important; height: 44px !important; min-width: 44px; } .field input, .field select, .field textarea { width: 100%; font-size: 16px !important; } .field input, .field select { min-height: 44px; } .modal-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; } .modal-actions > button { flex: 1 1 120px; min-height: 44px; } /* Reminder and New Message forms act like native mobile bottom sheets. */ #reminderModal, #messageModal { align-items: end !important; } #reminderModal .modal-card, #messageModal .modal-card { max-width: none !important; border-radius: 22px 22px 12px 12px !important; } /* Authentication remains centered. */ #authModal { place-items: center !important; } #authModal .auth-card { width: min( 100%, 390px ) !important; max-height: calc( 100dvh - 22px ) !important; padding: 20px !important; } #authModal input, #authModal select { font-size: 16px !important; } /* -------------------------------------------------------- USER POPOVER / TOAST -------------------------------------------------------- */ .user-popover { top: calc( 56px + env(safe-area-inset-top) ) !important; right: max( 10px, env(safe-area-inset-right) ) !important; max-width: calc( 100vw - 20px ); } .popover button { min-height: 42px; } .toast { left: max( 10px, env(safe-area-inset-left) ) !important; right: max( 10px, env(safe-area-inset-right) ) !important; bottom: max( 14px, env(safe-area-inset-bottom) ) !important; width: auto; max-width: none; transform: none !important; text-align: center; } /* ======================================================== FULL-SCREEN REMINDER CALL ======================================================== */ .ultron-reminder-call-v1 { width: 100vw !important; height: 100vh !important; height: 100dvh !important; padding: max( 14px, env(safe-area-inset-top) ) max( 14px, env(safe-area-inset-right) ) max( 16px, env(safe-area-inset-bottom) ) max( 14px, env(safe-area-inset-left) ) !important; } .ultron-reminder-statusbar-v1 { top: max( 12px, env(safe-area-inset-top) ) !important; left: max( 14px, env(safe-area-inset-left) ) !important; right: max( 14px, env(safe-area-inset-right) ) !important; } .ultron-reminder-incoming-v1, .ultron-reminder-active-v1 { width: 100% !important; max-width: 520px !important; min-width: 0 !important; height: 100% !important; } .ultron-reminder-incoming-v1 { padding: clamp( 68px, 10vh, 92px ) 0 max( 14px, env(safe-area-inset-bottom) ) !important; } .ultron-reminder-logo-stage-v1 { width: 110px !important; height: 110px !important; margin-bottom: 18px !important; } .ultron-reminder-logo-v1 { width: 82px !important; height: 82px !important; } .ultron-reminder-incoming-v1 h1 { font-size: clamp( 24px, 7vw, 30px ) !important; } .ultron-reminder-task-v1 { width: 100%; max-width: 100% !important; margin-top: clamp( 24px, 5vh, 42px ) !important; padding: 0 8px !important; font-size: clamp( 18px, 5.4vw, 23px ) !important; overflow-wrap: anywhere; } .ultron-reminder-due-v1 { font-size: 11px; } /* Incoming screen remains exactly: End + Answer. */ #reminderIncomingScreen #reminderLaterButton, #reminderIncomingScreen .ultron-reminder-later-inline-v2 { display: none !important; } #reminderIncomingScreen .ultron-reminder-call-controls-v1 { width: min( 310px, 88vw ) !important; grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; gap: clamp( 42px, 14vw, 64px ) !important; align-items: end !important; justify-content: center !important; } .ultron-reminder-call-circle-v1 { width: 66px !important; height: 66px !important; } /* Active answered call */ .ultron-reminder-active-v1 { padding: clamp( 64px, 9vh, 82px ) 0 max( 10px, env(safe-area-inset-bottom) ) !important; overflow-y: auto; overscroll-behavior: contain; } .ultron-reminder-active-logo-v1 { width: 82px !important; height: 82px !important; margin-bottom: 12px !important; } .ultron-reminder-logo-v1.small { width: 62px !important; height: 62px !important; } .ultron-reminder-active-v1 h1 { font-size: 21px !important; } .ultron-reminder-active-task-v1 { width: 100%; max-width: 100% !important; margin-top: 18px !important; padding: 0 8px !important; font-size: 17px !important; overflow-wrap: anywhere; } .ultron-reminder-wave-v1 { margin-bottom: 9px !important; } .ultron-reminder-voice-zone-v1 small { max-width: 92% !important; } .ultron-reminder-quick-controls-v1 { width: min( 100%, 360px ) !important; grid-template-columns: repeat( 4, minmax(0,1fr) ) !important; gap: 5px !important; } .ultron-reminder-quick-controls-v1 button { min-width: 0 !important; } .ultron-reminder-quick-controls-v1 button > span { width: 44px !important; height: 44px !important; } .ultron-reminder-end-v1 { width: min( 100%, 350px ) !important; min-height: 48px; margin-top: 12px !important; } .ultron-reminder-later-sheet-v1 { width: calc( 100vw - 20px ) !important; max-width: 470px; bottom: max( 10px, env(safe-area-inset-bottom) ) !important; } } /* ============================================================ SMALL PHONE ============================================================ */ @media (max-width: 420px) { .topbar { padding-left: 8px !important; padding-right: 8px !important; } .chat-title-wrap strong, .subtitle-line { max-width: calc(100vw - 114px); } #chatView .chat-stage { padding-left: 10px !important; padding-right: 10px !important; } #conversation .message.user > .bubble, body[data-ultron-message-style] .message.user .bubble { max-width: 91% !important; } #chatView .composer-wrap { padding-left: 6px !important; padding-right: 6px !important; } #chatView .composer { border-radius: 15px !important; } #chatView .composer-tool, #chatView .send-button { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; flex-basis: 40px !important; } #remindersView .ultron-reminder-heading-actions-v1 { grid-template-columns: 1fr; } .content-page { padding-left: 10px !important; padding-right: 10px !important; } #settingsView .settings-detail { padding-left: 10px !important; padding-right: 10px !important; } #messagesView .threads-panel { max-height: 146px !important; } #messagesView .threads-list { max-height: 146px; } #messagesView .thread-messages { padding-left: 8px !important; padding-right: 8px !important; } #messagesView .ultron-dm-row-v2 { width: 91% !important; max-width: 91% !important; } .ultron-reminder-logo-stage-v1 { width: 102px !important; height: 102px !important; } .ultron-reminder-logo-v1 { width: 76px !important; height: 76px !important; } #reminderIncomingScreen .ultron-reminder-call-controls-v1 { width: min( 290px, 92vw ) !important; gap: 36px !important; } .ultron-reminder-call-circle-v1 { width: 64px !important; height: 64px !important; } } /* ============================================================ SHORT MOBILE SCREEN ============================================================ */ @media (max-width: 820px) and (max-height: 650px) { .ultron-reminder-incoming-v1 { padding-top: 54px !important; padding-bottom: 8px !important; } .ultron-reminder-logo-stage-v1 { width: 88px !important; height: 88px !important; margin-bottom: 10px !important; } .ultron-reminder-logo-v1 { width: 66px !important; height: 66px !important; } .ultron-reminder-task-v1 { margin-top: 14px !important; font-size: 17px !important; } .ultron-reminder-active-v1 { padding-top: 54px !important; } .ultron-reminder-active-logo-v1 { width: 64px !important; height: 64px !important; margin-bottom: 7px !important; } .ultron-reminder-logo-v1.small { width: 50px !important; height: 50px !important; } .ultron-reminder-active-task-v1 { margin-top: 9px !important; font-size: 15px !important; } .ultron-reminder-wave-v1 { height: 32px !important; margin-bottom: 5px !important; } .ultron-reminder-end-v1 { margin-top: 6px !important; } } /* ============================================================ PHONE LANDSCAPE — REMINDER CALL ============================================================ */ @media (max-width: 1023px) and (orientation: landscape) and (max-height: 600px) { .ultron-reminder-call-v1 { overflow-y: auto !important; } .ultron-reminder-incoming-v1 { padding: 46px 0 10px !important; } .ultron-reminder-logo-stage-v1 { width: 76px !important; height: 76px !important; margin-bottom: 7px !important; } .ultron-reminder-logo-v1 { width: 58px !important; height: 58px !important; } .ultron-reminder-incoming-v1 h1 { font-size: 22px !important; } .ultron-reminder-task-v1 { margin-top: 10px !important; font-size: 17px !important; } #reminderIncomingScreen .ultron-reminder-call-controls-v1 { margin-top: 14px; gap: 44px !important; } .ultron-reminder-call-circle-v1 { width: 58px !important; height: 58px !important; } .ultron-reminder-active-v1 { padding: 46px 0 8px !important; } .ultron-reminder-active-logo-v1 { width: 58px !important; height: 58px !important; margin-bottom: 4px !important; } .ultron-reminder-logo-v1.small { width: 46px !important; height: 46px !important; } .ultron-reminder-active-task-v1 { margin-top: 6px !important; font-size: 14px !important; } .ultron-reminder-wave-v1 { height: 28px !important; margin-bottom: 3px !important; } .ultron-reminder-quick-controls-v1 button > span { width: 38px !important; height: 38px !important; } .ultron-reminder-end-v1 { min-height: 42px; height: 42px; margin-top: 4px !important; } } /* ULTRON MOBILE RESPONSIVE V1 END */ /* ULTRON MOBILE SETTINGS ACCOUNT FIT V2 START */ @media (max-width: 820px) { /* * COMMON MOBILE VIEW SAFETY */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } .app-shell, .main-shell, .main-content, .view, .active-view { min-width: 0 !important; max-width: 100vw !important; } /* * SETTINGS VIEW */ #settingsView { width: 100% !important; max-width: 100vw !important; min-width: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; box-sizing: border-box !important; padding-left: max(12px, env(safe-area-inset-left)) !important; padding-right: max(12px, env(safe-area-inset-right)) !important; padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; } #settingsView > *, #settingsView .settings-layout, #settingsView .settings-shell, #settingsView .settings-content, #settingsView .settings-panel, #settingsView .settings-card, #settingsView .settings-section, #settingsView .settings-main { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #settingsView .settings-layout, #settingsView .settings-shell { grid-template-columns: minmax(0, 1fr) !important; } #settingsView input, #settingsView select, #settingsView textarea, #settingsView button { max-width: 100% !important; box-sizing: border-box !important; } /* * SETTINGS NAV * Mobile-la left-side desktop menu overflow aaga koodathu. */ #settingsView .settings-nav, #settingsView .settings-sidebar, #settingsView .settings-tabs { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #settingsView .settings-nav::-webkit-scrollbar, #settingsView .settings-sidebar::-webkit-scrollbar, #settingsView .settings-tabs::-webkit-scrollbar { display: none; } /* * ACCOUNT / USER MENU * * User chip press pannumbodhu menu screen-ku veliya * pogama common mobile bottom-sheet style. */ .user-popover, .account-popover, .user-menu, .account-menu, .profile-popover, .profile-menu { position: fixed !important; left: max(12px, env(safe-area-inset-left)) !important; right: max(12px, env(safe-area-inset-right)) !important; top: auto !important; bottom: max(12px, env(safe-area-inset-bottom)) !important; width: auto !important; max-width: none !important; max-height: calc( 100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom) ) !important; overflow-x: hidden !important; overflow-y: auto !important; box-sizing: border-box !important; margin: 0 !important; transform: none !important; border-radius: 20px !important; z-index: 10050 !important; -webkit-overflow-scrolling: touch; } /* * Known ULTRON account popup owner safety */ #userPopover, #accountPopover, #userMenu, #accountMenu { position: fixed !important; left: max(12px, env(safe-area-inset-left)) !important; right: max(12px, env(safe-area-inset-right)) !important; top: auto !important; bottom: max(12px, env(safe-area-inset-bottom)) !important; width: auto !important; max-width: none !important; max-height: calc( 100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom) ) !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; margin: 0 !important; transform: none !important; z-index: 10050 !important; } /* * ACCOUNT CONTENT */ .user-popover *, .account-popover *, .user-menu *, .account-menu *, .profile-popover *, .profile-menu *, #userPopover *, #accountPopover *, #userMenu *, #accountMenu * { max-width: 100%; box-sizing: border-box; } /* * Long username / email / user-code safety */ .user-popover, .account-popover, .user-menu, .account-menu, .profile-popover, .profile-menu, #userPopover, #accountPopover, #userMenu, #accountMenu { overflow-wrap: anywhere !important; word-break: break-word !important; } /* * Mobile modal common fitting */ .modal, .dialog, .modal-card, .dialog-card { max-width: calc( 100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right) ) !important; max-height: calc( 100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom) ) !important; box-sizing: border-box !important; } } @media (max-width: 420px) { #settingsView { padding-left: max(10px, env(safe-area-inset-left)) !important; padding-right: max(10px, env(safe-area-inset-right)) !important; } .user-popover, .account-popover, .user-menu, .account-menu, .profile-popover, .profile-menu, #userPopover, #accountPopover, #userMenu, #accountMenu { left: max(8px, env(safe-area-inset-left)) !important; right: max(8px, env(safe-area-inset-right)) !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; border-radius: 18px !important; } } /* ULTRON MOBILE SETTINGS ACCOUNT FIT V2 END */