*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--wg-bg);color:var(--wg-text);font-family:var(--wg-font);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}.muted{color:var(--wg-muted)}.tiny{font-size:12px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--wg-primary);margin:0 0 6px}.glass-panel{background:color-mix(in srgb,var(--wg-surface) 88%,transparent);border:1px solid color-mix(in srgb,var(--wg-border) 84%,transparent);box-shadow:0 20px 60px rgba(16,24,40,.08);backdrop-filter:blur(18px)}.card,.elevated-card{background:var(--wg-surface);border:1px solid var(--wg-border);border-radius:var(--wg-radius);box-shadow:0 14px 42px rgba(16,24,40,.08)}.elevated-card{padding:22px}.btn{border:1px solid var(--wg-border);background:var(--wg-surface);color:var(--wg-text);min-height:44px;border-radius:14px;padding:0 18px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.16s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(16,24,40,.1)}.btn.primary{background:linear-gradient(135deg,var(--wg-primary),var(--wg-accent));color:#fff;border:0}.btn.ghost{background:transparent}.btn.full{width:100%}.with-icon svg,.btn span[class^=icon-]{width:18px;height:18px}.mini-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--wg-border);border-radius:999px;background:var(--wg-surface);color:var(--wg-text);font-weight:800;font-size:12px;min-height:34px;padding:0 12px}.icon-button{width:42px;height:42px;border:1px solid var(--wg-border);border-radius:14px;background:var(--wg-surface);display:grid;place-items:center;color:var(--wg-text)}.app-shell{display:grid;grid-template-columns:320px minmax(0,1fr);height:100vh;padding:10px;gap:10px}.sidebar{height:calc(100vh - 20px);border-radius:24px;padding:18px;display:flex;flex-direction:column;background:var(--wg-sidebar);color:var(--wg-sidebar-text);position:sticky;top:10px}.brand-row{display:flex;align-items:center;gap:12px;margin-bottom:18px}.brand-row strong{display:block;font-size:18px}.brand-row small{display:block;color:var(--wg-muted);font-size:12px;margin-top:2px}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--wg-primary),var(--wg-accent));font-weight:900;box-shadow:0 12px 28px color-mix(in srgb,var(--wg-primary) 22%,transparent)}.sidebar-top{display:grid;gap:12px}.conversation-list{display:grid;gap:8px;overflow:auto;padding:16px 2px;min-height:0}.conversation-link{display:grid;gap:5px;padding:13px 14px;border-radius:16px;color:var(--wg-sidebar-text);border:1px solid transparent}.conversation-link:hover{background:color-mix(in srgb,var(--wg-primary) 8%,transparent)}.conversation-link.active{background:color-mix(in srgb,var(--wg-primary) 12%,var(--wg-surface));border-color:color-mix(in srgb,var(--wg-primary) 28%,var(--wg-border))}.conversation-title-text{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-link small{color:var(--wg-muted)}.sidebar-bottom{margin-top:auto;display:grid;gap:10px}.workspace{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;gap:10px}.topbar{min-height:102px;border-radius:24px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px}.title-stack{min-width:0}.rename-form{display:flex;align-items:center;gap:8px}.rename-form input{font-size:26px;font-weight:900;border:0;background:transparent;color:var(--wg-text);outline:none;width:min(560px,58vw);padding:2px 0}.rename-form input:focus{box-shadow:0 2px 0 var(--wg-primary)}.segmented-tabs{display:flex;background:var(--wg-surface-muted);border:1px solid var(--wg-border);padding:5px;border-radius:18px;gap:4px}.tab{border:0;background:transparent;border-radius:14px;min-height:44px;padding:0 16px;font-weight:900;color:var(--wg-muted);display:flex;align-items:center;gap:8px}.tab.active{background:var(--wg-surface);color:var(--wg-text);box-shadow:0 8px 20px rgba(16,24,40,.08)}.panel{display:none;min-height:0}.panel.active-panel{display:block}.chat-panel{height:100%;position:relative;padding-bottom:118px}.messages{height:100%;overflow:auto;padding:22px min(7vw,90px) 24px;display:flex;flex-direction:column;gap:18px;scroll-behavior:smooth}.message{display:flex;gap:12px;align-items:flex-start}.message.user{flex-direction:row-reverse}.avatar{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-size:12px;font-weight:900;background:var(--wg-surface-muted);color:var(--wg-muted);border:1px solid var(--wg-border);flex:0 0 auto}.message.user .avatar{background:var(--wg-user-bubble);color:var(--wg-user-text);border:0}.message-card{max-width:min(820px,78%);border:1px solid var(--wg-border);border-radius:var(--wg-radius);background:var(--wg-assistant-bubble);color:var(--wg-assistant-text);padding:14px 16px;box-shadow:0 12px 30px rgba(16,24,40,.06)}.message.user .message-card{background:var(--wg-user-bubble);color:var(--wg-user-text);border:0}.message-meta{font-size:12px;color:var(--wg-muted);margin-bottom:8px}.message.user .message-meta{color:color-mix(in srgb,var(--wg-user-text) 80%,transparent)}.message-body{font-size:16px;line-height:1.65}.message-body p{margin:0 0 12px}.message-body p:last-child{margin-bottom:0}.message-body ul,.message-body ol{margin:0 0 12px;padding-left:24px}.message-body code:not(pre code){background:color-mix(in srgb,var(--wg-primary) 10%,transparent);padding:2px 6px;border-radius:8px}.code-card{border:1px solid var(--wg-border);border-radius:16px;overflow:hidden;background:#0b1020;margin:14px 0}.code-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;background:#111827;color:#e5e7eb}.code-language{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.copy-code{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:7px 10px;font-weight:800}.code-card pre{margin:0;overflow:auto;padding:16px;color:#e5e7eb;line-height:1.55}.prompt-bar{position:absolute;left:min(7vw,90px);right:min(7vw,90px);bottom:16px;border-radius:24px;padding:12px;display:grid;grid-template-columns:250px minmax(0,1fr) auto;gap:12px;align-items:end}.prompt-bar select,.prompt-bar textarea,.prompt-bar input,.image-form select,.image-form textarea,.bundle-form input,.bundle-form textarea,.theme-editor-grid input,.theme-editor-grid select,.theme-editor-grid textarea{width:100%;border:1px solid var(--wg-border);background:var(--wg-surface);color:var(--wg-text);border-radius:14px;padding:12px 14px;outline:none}.prompt-bar select:focus,.prompt-bar textarea:focus,.image-form textarea:focus,.theme-editor-grid input:focus,.theme-editor-grid select:focus{border-color:var(--wg-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--wg-primary) 13%,transparent)}.prompt-wrap textarea{resize:none;min-height:48px;max-height:190px}.prompt-wrap small{display:block;color:var(--wg-muted);font-size:12px;margin:6px 0 0}.send-btn{min-height:48px}.empty-state{text-align:center;margin:auto;color:var(--wg-muted)}.hero-empty{max-width:560px;padding:80px 20px}.hero-empty h2{font-size:36px;letter-spacing:-.04em;color:var(--wg-text);margin:16px 0 8px}.hero-icon{width:70px;height:70px;border-radius:24px;margin:0 auto;display:grid;place-items:center;background:linear-gradient(135deg,var(--wg-primary),var(--wg-accent));color:#fff}.image-workbench,.file-workbench{height:100%;overflow:auto;padding:26px;display:grid;grid-template-columns:360px minmax(0,1fr);gap:22px}.image-form,.bundle-form{display:grid;gap:14px;align-self:start}.image-form label,.bundle-form label,.theme-editor-grid label{display:grid;gap:7px;font-size:13px;font-weight:900}.image-form textarea{min-height:150px;resize:vertical}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;align-content:start}.image-card{margin:0;background:var(--wg-surface);border:1px solid var(--wg-border);border-radius:20px;overflow:hidden;box-shadow:0 12px 30px rgba(16,24,40,.06)}.image-preview-button{border:0;padding:0;background:transparent;width:100%;aspect-ratio:1/1;overflow:hidden}.image-card img{width:100%;height:100%;object-fit:cover;transition:.2s ease}.image-card:hover img{transform:scale(1.025)}.image-card figcaption{padding:12px;display:grid;gap:7px}.image-card figcaption strong{font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.image-card figcaption small{color:var(--wg-muted)}.image-actions{display:flex;gap:7px;flex-wrap:wrap}.bundle-result{padding:22px}.bundle-result ul{padding-left:20px}.modal.hidden{display:none}.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:28px}.modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.62);backdrop-filter:blur(8px)}.modal-card{position:relative;background:var(--wg-surface);color:var(--wg-text);border:1px solid var(--wg-border);border-radius:24px;box-shadow:0 30px 100px rgba(0,0,0,.3);max-width:min(980px,96vw);max-height:92vh;overflow:auto}.image-modal-card{padding:18px}.modal-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:12px}.modal-head h3{margin:0;font-size:20px}.image-modal-card img{border-radius:18px;max-height:68vh;width:100%;object-fit:contain;background:var(--wg-surface-muted)}.modal-actions{display:flex;justify-content:flex-end;margin-top:14px}.admin-shell{min-height:100vh;display:grid;grid-template-columns:290px minmax(0,1fr);padding:10px;gap:10px}.admin-sidebar{border-radius:24px;padding:18px;display:flex;flex-direction:column;position:sticky;top:10px;height:calc(100vh - 20px);background:var(--wg-sidebar);color:var(--wg-sidebar-text)}.admin-nav{display:grid;gap:8px}.admin-nav-link{display:flex;align-items:center;gap:10px;border-radius:16px;padding:12px 14px;font-weight:900;color:var(--wg-sidebar-text)}.admin-nav-link.active,.admin-nav-link:hover{background:color-mix(in srgb,var(--wg-primary) 12%,var(--wg-surface));color:var(--wg-text)}.admin-sidebar-footer{margin-top:auto;display:grid;gap:10px}.admin-main{min-width:0;padding:28px;overflow:auto}.admin-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}.admin-page-head h1{font-size:34px;line-height:1;margin:0 0 8px;letter-spacing:-.04em}.alert{padding:14px 16px;border-radius:16px;margin:0 0 16px;font-weight:800}.alert.success{background:#ecfdf3;color:#027a48;border:1px solid #abefc6}.alert.error{background:#fef3f2;color:#b42318;border:1px solid #fecdca}.section-head{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:14px}.section-head h2{margin:0;font-size:20px}.section-head p{margin:4px 0 0}.theme-editor-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);gap:18px;align-items:start}.theme-card{display:grid;gap:14px}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.color-field span{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px}.color-field input[type=color]{padding:2px;height:44px}.color-field input[readonly]{font-family:ui-monospace,Menlo,monospace}.form-grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.check-row{align-self:end;display:flex!important;grid-template-columns:none!important;align-items:center;gap:10px;min-height:48px}.check-row input{width:auto!important}.theme-preview-card{position:sticky;top:28px}.theme-preview{border:1px solid var(--wg-border);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:120px 1fr;min-height:260px;background:var(--wg-bg)}.preview-sidebar{background:var(--wg-sidebar);color:var(--wg-sidebar-text);padding:14px;display:grid;align-content:start;gap:10px}.preview-sidebar span{padding:9px;border-radius:12px;background:var(--wg-surface-muted);font-size:12px}.preview-sidebar .active{background:color-mix(in srgb,var(--wg-primary) 15%,var(--wg-surface))}.preview-chat{padding:14px;display:grid;gap:12px;align-content:start}.preview-top{border:1px solid var(--wg-border);border-radius:14px;padding:10px;background:var(--wg-surface);font-weight:900}.preview-message{padding:12px;border-radius:16px;font-size:13px;box-shadow:0 8px 20px rgba(16,24,40,.06)}.preview-message.ai{background:var(--wg-assistant-bubble);color:var(--wg-assistant-text);border:1px solid var(--wg-border);justify-self:start}.preview-message.user{background:var(--wg-user-bubble);color:var(--wg-user-text);justify-self:end}.preview-prompt{border:1px solid var(--wg-border);background:var(--wg-surface);color:var(--wg-muted);border-radius:16px;padding:12px;margin-top:20px}.sticky-actions{position:sticky;bottom:18px;grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end;padding:12px;border:1px solid var(--wg-border);border-radius:20px;background:color-mix(in srgb,var(--wg-surface) 88%,transparent);backdrop-filter:blur(16px)}table{width:100%;border-collapse:collapse;background:var(--wg-surface);border-radius:18px;overflow:hidden;border:1px solid var(--wg-border)}th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--wg-border)}th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--wg-muted);background:var(--wg-surface-muted)}tr:last-child td{border-bottom:0}.grid{display:grid;gap:16px}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.stat{padding:18px}.stat strong{display:block;font-size:30px;letter-spacing:-.04em}.stat span{color:var(--wg-muted);font-weight:800}.form-card{max-width:900px}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(460px,100%);padding:26px}.auth-card form{display:grid;gap:14px}.auth-card h1{margin:0 0 8px}.auth-card label{display:grid;gap:7px;font-weight:900}.auth-card input{width:100%;border:1px solid var(--wg-border);background:var(--wg-surface);color:var(--wg-text);border-radius:14px;padding:12px 14px}.icon-plus:before{content:'+'}.icon-settings:before{content:'⚙'}.icon-check:before{content:'✓'}.icon-chat:before{content:'✦'}.icon-image:before{content:'▧'}.icon-folder:before{content:'▣'}.icon-send:before{content:'➤'}.icon-spark:before{content:'✦'}.icon-download:before{content:'⇩'}.icon-x:before{content:'×'}.nav-icon{width:22px;height:22px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--wg-primary) 12%,transparent);color:var(--wg-primary);font-weight:900}.icon-grid:before{content:'▦'}.icon-palette:before{content:'◈'}.icon-users:before{content:'◎'}.icon-logs:before{content:'☰'}@media(max-width:1100px){.app-shell,.admin-shell{grid-template-columns:1fr;height:auto;min-height:100vh}.sidebar,.admin-sidebar{position:relative;height:auto}.workspace{min-height:75vh}.prompt-bar{left:16px;right:16px;grid-template-columns:1fr}.image-workbench,.file-workbench,.theme-editor-grid{grid-template-columns:1fr}.theme-preview-card{position:relative;top:auto}.form-grid.two{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}.rename-form input{width:70vw}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.app-shell,.admin-shell{padding:0}.sidebar,.admin-sidebar,.topbar{border-radius:0}.messages{padding:16px 12px 140px}.message-card{max-width:88%}.prompt-bar{bottom:8px}.segmented-tabs{width:100%;overflow:auto}.image-workbench,.file-workbench,.admin-main{padding:16px}.color-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 22px}.stats-grid .stat{background:var(--wg-surface);border:1px solid var(--wg-border);border-radius:var(--wg-radius);padding:20px;box-shadow:0 14px 42px rgba(16,24,40,.08)}.stats-grid .stat span{display:block;font-size:32px;font-weight:950;letter-spacing:-.05em;color:var(--wg-text)}.stats-grid .stat small{display:block;color:var(--wg-muted);font-weight:900;margin-top:4px}.admin-main>h1,.admin-main .section-head h1{font-size:34px;line-height:1;margin:0 0 18px;letter-spacing:-.04em}.admin-main section.card{padding:20px;margin-bottom:18px;overflow:auto}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:22px}.form-grid label{display:grid;gap:7px;font-size:13px;font-weight:900}.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid var(--wg-border);background:var(--wg-surface);color:var(--wg-text);border-radius:14px;padding:12px 14px;outline:none}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--wg-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--wg-primary) 13%,transparent)}.full-width{grid-column:1/-1}.form-actions{display:flex;gap:10px;align-items:center}.check,.check-row{font-weight:800}.actions{display:flex;gap:8px;align-items:center}.actions form{display:inline}.btn.danger{border-color:#fecdca;color:#b42318;background:#fef3f2}.truncate{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pagination{display:flex;gap:6px;list-style:none;padding:12px 0;margin:0}@media(max-width:900px){.stats-grid,.form-grid{grid-template-columns:1fr}}
/* Wizard Guru AI - ChatGPT-tyylinen tasainen keskusteluasettelu, ei korttimaista chat-ikkunaa */
.app-shell.modern-chat{grid-template-columns:280px minmax(0,1fr);height:100vh;padding:0;gap:0;background:var(--wg-bg)}
.modern-chat .sidebar{height:100vh;top:0;border-radius:0;border:0;border-right:1px solid var(--wg-border);box-shadow:none;backdrop-filter:none;background:var(--wg-sidebar);padding:14px}
.modern-chat .sidebar.glass-panel,.modern-chat .topbar.glass-panel,.modern-chat .prompt-bar.glass-panel{box-shadow:none;backdrop-filter:none}
.modern-chat .brand-mark{width:36px;height:36px;border-radius:10px;box-shadow:none}
.modern-chat .brand-row{margin-bottom:12px}.modern-chat .brand-row strong{font-size:16px}.modern-chat .brand-row small{font-size:11px}
.modern-chat .conversation-list{gap:4px;padding:12px 0}.modern-chat .conversation-link{border:0;border-radius:10px;padding:10px 12px}.modern-chat .conversation-link.active{border:0;background:var(--wg-surface-muted)}
.modern-chat .workspace{gap:0;background:var(--wg-surface);grid-template-rows:auto minmax(0,1fr)}
.modern-chat .topbar{min-height:70px;border-radius:0;border:0;border-bottom:1px solid var(--wg-border);background:var(--wg-surface);padding:10px 24px}.modern-chat .eyebrow{font-size:11px;margin-bottom:3px;color:var(--wg-muted);letter-spacing:0;text-transform:none;font-weight:700}
.modern-chat .rename-form input{font-size:20px;font-weight:750;width:min(540px,52vw)}.modern-chat .rename-form input:focus{box-shadow:0 1px 0 var(--wg-primary)}.modern-chat .title-stack>.muted.tiny{display:none}.modern-chat .icon-button{border-radius:10px;box-shadow:none}
.modern-chat .segmented-tabs{border-radius:999px;background:var(--wg-surface-muted);padding:4px}.modern-chat .tab{border-radius:999px;min-height:38px;padding:0 14px}.modern-chat .tab.active{box-shadow:none}
.modern-chat .chat-panel{height:calc(100vh - 71px);padding-bottom:0;background:var(--wg-surface)}
.modern-chat .messages{height:100%;padding:24px max(24px,calc((100% - 860px)/2)) 142px;gap:0;display:block;background:transparent}
.modern-chat .message{width:100%;max-width:860px;margin:0 auto;padding:18px 0;display:flex;gap:16px;align-items:flex-start;border:0}.modern-chat .message.user{justify-content:flex-end;flex-direction:row-reverse}.modern-chat .message+.message{border-top:0}
.modern-chat .avatar{width:30px;height:30px;border-radius:999px;background:var(--wg-surface-muted);color:var(--wg-muted);border:1px solid var(--wg-border);font-size:11px;box-shadow:none}.modern-chat .message.user .avatar{display:none}
.modern-chat .message-card{box-shadow:none}.modern-chat .message:not(.user) .message-card{max-width:100%;flex:1;border:0;border-radius:0;background:transparent;color:var(--wg-assistant-text);padding:0}.modern-chat .message.user .message-card{max-width:min(680px,78%);border:0;border-radius:24px;background:var(--wg-user-bubble);color:var(--wg-user-text);padding:11px 16px;box-shadow:none}
.modern-chat .message-meta{font-size:11px;margin:0 0 6px;color:var(--wg-muted);font-weight:650}.modern-chat .message.user .message-meta{display:none}.modern-chat .message-body{font-size:16px;line-height:1.7}.modern-chat .message-body p{margin:0 0 12px}.modern-chat .message-body p:last-child{margin-bottom:0}
.modern-chat .code-card{border-radius:10px;box-shadow:none;margin:14px 0;background:#0d1117;border:1px solid #30363d}.modern-chat .code-head{padding:9px 12px;background:#161b22}.modern-chat .copy-code{border-radius:8px}
.modern-chat .prompt-bar{position:absolute;left:50%;right:auto;bottom:20px;transform:translateX(-50%);width:min(860px,calc(100% - 48px));border-radius:28px;padding:10px 12px;display:grid;grid-template-columns:210px minmax(0,1fr) auto;gap:8px;align-items:end;background:color-mix(in srgb,var(--wg-surface) 96%,transparent);border:1px solid var(--wg-border);box-shadow:0 14px 48px rgba(16,24,40,.12)}
.modern-chat .prompt-bar select,.modern-chat .prompt-bar textarea,.modern-chat .prompt-bar input{border:0;background:transparent;box-shadow:none;border-radius:18px}.modern-chat .prompt-bar select{background:var(--wg-surface-muted);min-height:44px}.modern-chat .prompt-bar textarea{min-height:44px;padding-top:13px}.modern-chat .prompt-bar select:focus,.modern-chat .prompt-bar textarea:focus{border:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--wg-primary) 30%,transparent)}.modern-chat .prompt-wrap small{display:none}.modern-chat .send-btn{min-height:44px;border-radius:999px;padding:0 16px}
.modern-chat .hero-empty{max-width:680px;padding:12vh 20px 0}.modern-chat .hero-empty h2{font-size:32px;margin-top:18px}.modern-chat .hero-icon{box-shadow:none}
body.has-theme-background .modern-chat .workspace,body.has-theme-background .modern-chat .chat-panel,body.has-theme-background .modern-chat .messages{background:transparent}body.has-theme-background .modern-chat .topbar,body.has-theme-background .modern-chat .sidebar,body.has-theme-background .modern-chat .prompt-bar{background:color-mix(in srgb,var(--wg-surface) 90%,transparent);backdrop-filter:blur(14px)}
.theme-preview .preview-message.ai{border:0;box-shadow:none;background:transparent}.theme-preview .preview-message.user{border-radius:20px;box-shadow:none}
@media(max-width:1100px){.app-shell.modern-chat{grid-template-columns:1fr;height:auto;min-height:100vh}.modern-chat .sidebar{height:auto;position:relative;border-right:0;border-bottom:1px solid var(--wg-border)}.modern-chat .chat-panel{height:72vh}.modern-chat .prompt-bar{grid-template-columns:1fr;bottom:12px;width:calc(100% - 24px)}.modern-chat .messages{padding:18px 16px 190px}.modern-chat .rename-form input{width:70vw}.modern-chat .topbar{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.modern-chat .topbar{padding:12px 14px}.modern-chat .messages{padding:16px 12px 192px}.modern-chat .message{padding:14px 0}.modern-chat .message.user .message-card{max-width:86%}.modern-chat .avatar{width:28px;height:28px}.modern-chat .prompt-bar{border-radius:22px}.modern-chat .segmented-tabs{width:100%;overflow:auto}.modern-chat .tab{white-space:nowrap}}
/* Wizard Guru AI - logo + kevyempi ChatGPT-tyylinen viimeistely */
:root{
--wg-weight-regular: 400;
--wg-weight-medium: 500;
--wg-weight-semibold: 600;
}
body{
font-weight:var(--wg-weight-regular);
letter-spacing:-0.006em;
text-rendering:optimizeLegibility;
}
.logo-mark,
.brand-mark.logo-mark,
.auth-logo-mark{
display:block;
object-fit:contain;
padding:0;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
color:transparent;
}
.brand-row{
gap:11px;
}
.brand-row strong{
font-weight:var(--wg-weight-semibold) !important;
letter-spacing:-.025em;
}
.brand-row small{
font-weight:var(--wg-weight-regular);
color:#6b7280;
letter-spacing:-.01em;
}
.btn,
.mini-btn,
.tab,
.icon-button,
.conversation-title-text,
.stats-grid .stat small,
.stat span,
.stat strong,
.form-grid label,
.auth-card label,
.image-form label,
.bundle-form label,
.theme-editor-grid label,
.code-language,
.copy-code{
font-weight:var(--wg-weight-medium) !important;
}
.btn.primary,
.send-btn,
.tab.active,
.admin-nav-link.active,
.section-head h1,
.admin-main>h1,
.admin-main .section-head h1{
font-weight:var(--wg-weight-semibold) !important;
}
h1,h2,h3,
.hero-empty h2,
.rename-form input,
.modern-chat .rename-form input{
font-weight:var(--wg-weight-semibold) !important;
letter-spacing:-.035em;
}
.eyebrow,
.modern-chat .eyebrow,
.message-meta,
.modern-chat .message-meta,
th,
.tiny,
.muted{
font-weight:var(--wg-weight-regular) !important;
}
.modern-chat .sidebar{
background:#fbfbfc;
}
.modern-chat .brand-row{
padding:2px 0 8px;
}
.modern-chat .brand-mark.logo-mark{
width:36px;
height:36px;
border-radius:11px;
}
.modern-chat .conversation-link{
color:#374151;
font-weight:var(--wg-weight-regular);
}
.modern-chat .conversation-link.active{
background:#f3f4f6;
}
.modern-chat .conversation-link:hover{
background:#f7f7f8;
}
.modern-chat .topbar{
box-shadow:0 1px 0 rgba(17,24,39,.03);
}
.modern-chat .segmented-tabs{
background:#f3f4f6;
border-color:#e9ecef;
}
.modern-chat .tab{
color:#6b7280;
letter-spacing:-.012em;
}
.modern-chat .tab.active{
color:#111827;
background:#ffffff;
box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.modern-chat .message-body{
font-weight:var(--wg-weight-regular);
color:#0f172a;
letter-spacing:-.011em;
}
.modern-chat .message-body strong,
.modern-chat .message-body b{
font-weight:var(--wg-weight-semibold);
}
.modern-chat .message.user .message-card{
background:#f4f4f5;
color:#111827;
font-weight:var(--wg-weight-regular);
}
.modern-chat .avatar{
overflow:hidden;
background:#f5f7fb;
border-color:#edf0f3;
font-weight:var(--wg-weight-medium) !important;
}
.modern-chat .avatar-logo{
width:100%;
height:100%;
object-fit:cover;
}
.modern-chat .hero-icon{
background:transparent;
box-shadow:none;
}
.modern-chat .hero-logo{
width:70px;
height:70px;
object-fit:contain;
}
.modern-chat .prompt-bar{
border-color:#e5e7eb;
box-shadow:0 18px 50px rgba(17,24,39,.10);
}
.modern-chat .prompt-bar select,
.modern-chat .prompt-bar textarea{
font-weight:var(--wg-weight-regular);
}
.modern-chat .prompt-bar select{
background:#f7f7f8;
}
.modern-chat .send-btn{
box-shadow:none;
}
.modern-chat .code-card{
border-radius:12px;
}
.modern-chat .code-head{
font-weight:var(--wg-weight-medium);
}
.auth-card .brand-mark.auth-logo-mark{
width:58px;
height:58px;
border-radius:18px;
}
.auth-card h1{
font-weight:var(--wg-weight-semibold) !important;
}
.admin-sidebar .brand-mark.logo-mark{
width:38px;
height:38px;
}
.admin-nav-link,
.admin-sidebar-footer .btn,
.admin-main p,
.admin-main td,
.admin-main input,
.admin-main textarea,
.admin-main select{
font-weight:var(--wg-weight-regular) !important;
}
.admin-nav-link span:last-child{
font-weight:var(--wg-weight-medium);
}
@media(max-width:640px){
.modern-chat .brand-mark.logo-mark{width:34px;height:34px}
.modern-chat .message-body{font-size:15.5px}
}
/* Wizard AI logo + henkilökohtainen teema */
.wizard-brand-banner{display:grid;grid-template-columns:1fr;gap:2px;align-items:center;margin-bottom:14px;min-height:58px}.wizard-brand-banner .brand-logo{width:210px;max-width:100%;height:58px;object-fit:contain;object-position:left center}.brand-subtitle{font-size:11px;color:var(--wg-muted);font-weight:400;letter-spacing:-.01em;margin-left:3px}.admin-brand-banner .brand-logo{width:172px;height:50px;object-fit:contain;object-position:left center}.admin-brand-banner span{display:grid}.auth-logo-mark,.brand-mark-preview{background:transparent!important;object-fit:contain}.topbar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.theme-open-btn{min-height:38px;border-radius:999px;padding:0 14px;color:var(--wg-muted);font-weight:500!important}.theme-open-btn:hover{color:var(--wg-text);box-shadow:none;transform:none;background:var(--wg-surface-muted)}.icon-sparkle:before{content:'✦'}.brand-admin-grid{display:grid;grid-template-columns:260px 150px minmax(0,1fr);gap:18px;align-items:start}.brand-preview-box{border:1px solid var(--wg-border);border-radius:18px;background:var(--wg-surface-muted);padding:14px;display:grid;gap:10px;min-height:128px;place-items:center start}.brand-preview-box .tiny{justify-self:start}.brand-logo-preview{width:230px;height:72px;object-fit:contain;object-position:left center}.brand-preview-box.compact-mark{place-items:center}.brand-mark-preview{width:76px;height:76px;border-radius:20px}.brand-fields{align-self:stretch}.user-theme-modal{width:min(980px,96vw);padding:22px}.personal-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px;margin:14px 0}.personal-theme-fields{margin-top:12px}.split-actions{justify-content:space-between;gap:12px}.user-theme-modal .modal-head h3{font-weight:600!important;letter-spacing:-.035em}.user-theme-modal label{font-weight:500!important;font-size:13px}.user-theme-modal input,.user-theme-modal select{width:100%;border:1px solid var(--wg-border);background:var(--wg-surface);color:var(--wg-text);border-radius:14px;padding:12px 14px;outline:none}.user-theme-modal input:focus,.user-theme-modal select:focus{border-color:var(--wg-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--wg-primary) 13%,transparent)}.user-theme-modal .color-field span{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px}.user-theme-modal .color-field input[type=color]{height:42px;padding:2px}.user-theme-modal .color-field input[readonly]{font-family:ui-monospace,Menlo,monospace;font-size:12px}.modern-chat .message:not(.user) .avatar{background:transparent;border:0}.modern-chat .avatar-logo{width:100%;height:100%;object-fit:contain;border-radius:999px}.modern-chat .hero-logo{width:76px;height:76px;object-fit:contain}.modern-chat .brand-row strong,.modern-chat .conversation-title-text,.modern-chat .tab,.modern-chat .btn,.modern-chat .message-meta,.modern-chat .rename-form input{letter-spacing:-.02em}.modern-chat .conversation-title-text{font-weight:500!important}.modern-chat .btn{font-weight:500!important}.modern-chat .tab.active,.modern-chat .send-btn,.modern-chat .rename-form input{font-weight:600!important}.modern-chat .message-body,.modern-chat .prompt-bar textarea,.modern-chat .prompt-bar select{font-weight:400!important}.theme-editor-grid .full-width{grid-column:1/-1}.theme-editor-grid small{font-size:12px;line-height:1.45}@media(max-width:1100px){.topbar-actions{justify-content:flex-start}.brand-admin-grid{grid-template-columns:1fr}.brand-logo-preview{width:260px}.wizard-brand-banner .brand-logo{width:190px}}@media(max-width:640px){.wizard-brand-banner .brand-logo{width:176px;height:52px}.topbar-actions{width:100%}.theme-open-btn{width:100%}.user-theme-modal{padding:16px}.personal-theme-grid{grid-template-columns:1fr}.split-actions{flex-direction:column-reverse}.brand-admin-grid{gap:12px}}
/* 2026-06-02: ChatGPT-tyylinen kiinteä chat, henkilökohtainen tausta ja liitteet */
.chat-page{
overflow:hidden;
background-color:var(--wg-bg);
}
.chat-page.has-theme-background{
background-repeat:no-repeat;
background-position:center;
background-size:cover;
background-attachment:fixed;
}
.chat-page .app-shell.modern-chat{
height:100dvh;
min-height:0;
padding:0;
gap:0;
grid-template-columns:320px minmax(0,1fr);
background:transparent;
}
.chat-page .modern-chat .sidebar{
height:100dvh;
min-height:100dvh;
top:0;
border-radius:0;
border-top:0;
border-left:0;
border-bottom:0;
padding:18px;
overflow:hidden;
background:color-mix(in srgb,var(--wg-sidebar) 94%,transparent) !important;
backdrop-filter:blur(16px);
}
.chat-page.has-theme-background .modern-chat .sidebar{
background:color-mix(in srgb,var(--wg-sidebar) 86%,transparent) !important;
}
.chat-page .modern-chat .sidebar-top{
flex:0 0 auto;
}
.chat-page .modern-chat .conversation-list{
flex:1 1 auto;
min-height:0;
overflow:auto;
padding-bottom:12px;
}
.chat-page .modern-chat .sidebar-bottom{
flex:0 0 auto;
margin-top:12px;
}
.chat-page .modern-chat .workspace{
height:100dvh;
min-height:0;
overflow:hidden;
background:transparent !important;
}
.chat-page .modern-chat .topbar{
position:relative;
z-index:5;
min-height:72px;
border-radius:0;
background:color-mix(in srgb,var(--wg-surface) 94%,transparent) !important;
backdrop-filter:blur(16px);
}
.chat-page.has-theme-background .modern-chat .topbar{
background:color-mix(in srgb,var(--wg-surface) 82%,transparent) !important;
}
.chat-page .modern-chat .chat-panel{
position:relative;
height:calc(100dvh - 72px);
min-height:0;
overflow:hidden;
background:transparent !important;
isolation:isolate;
}
.chat-page .modern-chat .chat-bg-personal{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background:linear-gradient(rgba(255,255,255,.58),rgba(255,255,255,.58));
}
.chat-page.has-theme-background .modern-chat .chat-bg-personal{
background:linear-gradient(rgba(255,255,255,var(--wg-bg-overlay)),rgba(255,255,255,var(--wg-bg-overlay)));
}
.chat-page .modern-chat .messages{
position:relative;
z-index:1;
height:100%;
overflow-y:auto;
padding:24px max(24px,calc((100% - 860px)/2)) 220px !important;
background:transparent !important;
scroll-padding-bottom:220px;
}
.chat-page .modern-chat .prompt-bar{
z-index:20;
bottom:max(18px,env(safe-area-inset-bottom));
grid-template-columns:46px 220px minmax(0,1fr) auto;
align-items:end;
width:min(920px,calc(100% - 48px));
background:color-mix(in srgb,var(--wg-surface) 96%,transparent) !important;
backdrop-filter:blur(18px);
}
.chat-page.has-theme-background .modern-chat .prompt-bar{
background:color-mix(in srgb,var(--wg-surface) 88%,transparent) !important;
}
.attachment-picker{
position:relative;
align-self:end;
}
.attachment-plus{
border-radius:999px;
width:46px;
height:46px;
background:var(--wg-surface-muted);
}
.attachment-menu{
position:absolute;
left:0;
bottom:56px;
width:220px;
padding:8px;
border:1px solid var(--wg-border);
border-radius:16px;
background:var(--wg-surface);
box-shadow:0 24px 80px rgba(15,23,42,.16);
display:grid;
gap:4px;
z-index:30;
}
.attachment-menu.hidden{display:none}
.attachment-menu button{
border:0;
background:transparent;
border-radius:12px;
min-height:40px;
padding:0 10px;
display:flex;
align-items:center;
gap:10px;
color:var(--wg-text);
font-weight:500;
text-align:left;
}
.attachment-menu button:hover{
background:var(--wg-surface-muted);
}
.attachment-preview{
display:flex;
flex-wrap:wrap;
gap:6px;
margin:0 0 6px;
}
.attachment-preview[hidden]{display:none}
.attachment-preview-chip,
.attachment-chip{
display:inline-flex;
align-items:center;
gap:8px;
max-width:100%;
min-height:34px;
border:1px solid var(--wg-border);
border-radius:999px;
background:color-mix(in srgb,var(--wg-surface-muted) 86%,transparent);
color:var(--wg-text);
padding:6px 10px;
font-size:12px;
}
.attachment-preview-chip strong,
.attachment-chip strong{
font-weight:500;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
max-width:220px;
}
.attachment-preview-chip small,
.attachment-chip small{
color:var(--wg-muted);
white-space:nowrap;
}
.attachment-chips{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:10px;
}
.attachment-text{
display:grid;
min-width:0;
line-height:1.15;
}
.attachment-icon{
flex:0 0 auto;
}
.chat-page .modern-chat .prompt-wrap textarea{
min-height:46px;
max-height:220px;
}
.chat-page .modern-chat .prompt-wrap small{
display:block;
font-size:11px;
margin-left:2px;
}
.chat-page .modern-chat .send-btn{
min-height:46px;
padding:0 18px;
}
.chat-page .modern-chat .message-card{
min-width:0;
}
.chat-page .modern-chat .message-body{
overflow-wrap:anywhere;
}
.user-theme-modal select[name="font_family"]{
min-height:48px;
}
@media(max-width:1100px){
.chat-page{overflow:auto}
.chat-page .app-shell.modern-chat{height:auto;min-height:100dvh;grid-template-columns:1fr}
.chat-page .modern-chat .sidebar{height:auto;min-height:0;position:relative;border-right:0;border-bottom:1px solid var(--wg-border)}
.chat-page .modern-chat .workspace{height:auto;min-height:78dvh;overflow:visible}
.chat-page .modern-chat .chat-panel{height:78dvh;min-height:560px}
.chat-page .modern-chat .prompt-bar{grid-template-columns:46px minmax(0,1fr) auto;left:12px;right:12px;transform:none;width:auto;bottom:12px}
.chat-page .modern-chat .prompt-bar select{grid-column:2 / 4;grid-row:1}
.chat-page .modern-chat .prompt-wrap{grid-column:1 / 3;grid-row:2}
.chat-page .modern-chat .send-btn{grid-column:3;grid-row:2}
.chat-page .modern-chat .attachment-picker{grid-column:1;grid-row:1}
}
@media(max-width:640px){
.chat-page .modern-chat .messages{padding:16px 12px 250px !important}
.chat-page .modern-chat .chat-panel{height:76dvh;min-height:540px}
.chat-page .modern-chat .prompt-bar{grid-template-columns:42px minmax(0,1fr);gap:8px;padding:9px;border-radius:22px}
.chat-page .modern-chat .prompt-bar select{grid-column:2;grid-row:1}
.chat-page .modern-chat .attachment-picker{grid-column:1;grid-row:1}
.chat-page .modern-chat .prompt-wrap{grid-column:1 / 3;grid-row:2}
.chat-page .modern-chat .send-btn{grid-column:1 / 3;grid-row:3;width:100%}
.attachment-menu{bottom:50px;width:210px}
.attachment-preview-chip strong,.attachment-chip strong{max-width:150px}
}
/* 2026-06-02: Prompt + sivupalkki viimeistely
- korjaa viewportin alareunan leikkautumisen
- tekee sivupalkin keskusteluista kompaktin ChatGPT-tyylisen listan
- nostaa promptin siistiksi, isommaksi ja henkilökohtaiset värit säilyttäen
*/
.chat-page,
.chat-page body{
min-height:100dvh;
}
.chat-page .app-shell.modern-chat{
height:100dvh !important;
min-height:100dvh !important;
overflow:hidden !important;
grid-template-columns:320px minmax(0,1fr) !important;
}
.chat-page .modern-chat .workspace{
height:100dvh !important;
min-height:0 !important;
overflow:hidden !important;
display:grid !important;
grid-template-rows:auto minmax(0,1fr) !important;
gap:0 !important;
}
.chat-page .modern-chat .topbar{
min-height:88px !important;
padding:14px 28px !important;
border-left:0 !important;
border-right:0 !important;
border-top:0 !important;
border-radius:0 !important;
box-shadow:0 1px 0 color-mix(in srgb,var(--wg-border) 72%,transparent) !important;
}
.chat-page .modern-chat .chat-panel.active-panel,
.chat-page .modern-chat #chatPanel.active-panel{
display:block !important;
height:auto !important;
min-height:0 !important;
overflow:hidden !important;
}
.chat-page .modern-chat .chat-panel{
height:auto !important;
min-height:0 !important;
padding-bottom:0 !important;
}
.chat-page .modern-chat .messages{
height:100% !important;
min-height:0 !important;
padding-top:30px !important;
padding-bottom:190px !important;
scroll-padding-bottom:190px !important;
}
.chat-page .modern-chat .sidebar{
display:flex !important;
flex-direction:column !important;
height:100dvh !important;
min-height:0 !important;
padding:18px 16px !important;
border-right:1px solid color-mix(in srgb,var(--wg-border) 80%,transparent) !important;
overflow:hidden !important;
}
.chat-page .modern-chat .sidebar-top{
display:grid !important;
gap:16px !important;
flex:0 0 auto !important;
}
.chat-page .modern-chat .wizard-brand-banner{
margin-bottom:4px !important;
}
.chat-page .modern-chat .wizard-brand-banner .brand-logo{
width:200px !important;
height:62px !important;
object-fit:contain !important;
object-position:left center !important;
}
.chat-page .modern-chat .sidebar .btn.full{
min-height:52px !important;
border-radius:18px !important;
font-size:15px !important;
font-weight:500 !important;
background:color-mix(in srgb,var(--wg-surface) 94%,transparent) !important;
}
.chat-page .modern-chat .conversation-list{
flex:1 1 auto !important;
min-height:0 !important;
display:flex !important;
flex-direction:column !important;
gap:4px !important;
align-content:flex-start !important;
justify-content:flex-start !important;
overflow-y:auto !important;
overflow-x:hidden !important;
padding:14px 2px 10px !important;
}
.chat-page .modern-chat .conversation-link{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
align-items:center !important;
column-gap:10px !important;
row-gap:0 !important;
min-height:42px !important;
height:auto !important;
padding:8px 10px !important;
border-radius:12px !important;
border:1px solid transparent !important;
background:transparent !important;
color:color-mix(in srgb,var(--wg-sidebar-text) 88%,var(--wg-muted)) !important;
}
.chat-page .modern-chat .conversation-link:hover{
background:color-mix(in srgb,var(--wg-primary) 7%,transparent) !important;
}
.chat-page .modern-chat .conversation-link.active{
background:color-mix(in srgb,var(--wg-primary) 11%,var(--wg-surface)) !important;
border-color:color-mix(in srgb,var(--wg-primary) 18%,var(--wg-border)) !important;
color:var(--wg-sidebar-text) !important;
}
.chat-page .modern-chat .conversation-title-text{
min-width:0 !important;
overflow:hidden !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:14px !important;
line-height:1.25 !important;
font-weight:400 !important;
letter-spacing:-.01em !important;
}
.chat-page .modern-chat .conversation-link.active .conversation-title-text{
font-weight:500 !important;
}
.chat-page .modern-chat .conversation-link small{
align-self:center !important;
color:var(--wg-muted) !important;
font-size:11px !important;
font-weight:400 !important;
white-space:nowrap !important;
line-height:1 !important;
}
.chat-page .modern-chat .sidebar-bottom{
flex:0 0 auto !important;
margin-top:10px !important;
padding-top:10px !important;
border-top:1px solid color-mix(in srgb,var(--wg-border) 60%,transparent) !important;
display:grid !important;
gap:8px !important;
}
.chat-page .modern-chat .message{
max-width:860px !important;
width:100% !important;
margin:0 auto !important;
padding:6px 0 !important;
}
.chat-page .modern-chat .message-card{
border:0 !important;
box-shadow:none !important;
border-radius:0 !important;
padding:2px 0 !important;
background:transparent !important;
max-width:100% !important;
}
.chat-page .modern-chat .message.user{
justify-content:flex-start !important;
}
.chat-page .modern-chat .message.user .message-card{
max-width:min(680px,82%) !important;
background:color-mix(in srgb,var(--wg-user-bubble) 12%,var(--wg-surface-muted)) !important;
color:var(--wg-text) !important;
border-radius:22px !important;
padding:12px 16px !important;
margin-left:auto !important;
}
.chat-page .modern-chat .message.user .message-meta{
display:none !important;
}
.chat-page .modern-chat .message:not(.user) .message-meta{
font-size:12px !important;
margin-bottom:6px !important;
color:var(--wg-muted) !important;
}
.chat-page .modern-chat .message-body{
font-size:15.5px !important;
line-height:1.72 !important;
font-weight:400 !important;
}
.chat-page .modern-chat .prompt-bar{
left:50% !important;
right:auto !important;
transform:translateX(-50%) !important;
bottom:max(28px,env(safe-area-inset-bottom)) !important;
width:min(940px,calc(100% - 64px)) !important;
min-height:88px !important;
padding:12px 14px !important;
border-radius:28px !important;
display:grid !important;
grid-template-columns:46px minmax(170px,245px) minmax(0,1fr) auto !important;
gap:10px !important;
align-items:center !important;
border:1px solid color-mix(in srgb,var(--wg-border) 82%,transparent) !important;
box-shadow:0 18px 50px rgba(15,23,42,.13),0 2px 10px rgba(15,23,42,.06) !important;
background:color-mix(in srgb,var(--wg-surface) 94%,transparent) !important;
}
.chat-page.has-theme-background .modern-chat .prompt-bar{
background:color-mix(in srgb,var(--wg-surface) 86%,transparent) !important;
}
.chat-page .modern-chat .attachment-picker{
align-self:center !important;
}
.chat-page .modern-chat .attachment-plus{
width:46px !important;
height:46px !important;
border-radius:16px !important;
background:color-mix(in srgb,var(--wg-surface-muted) 88%,transparent) !important;
border-color:color-mix(in srgb,var(--wg-border) 78%,transparent) !important;
}
.chat-page .modern-chat .attachment-plus:hover{
background:color-mix(in srgb,var(--wg-primary) 10%,var(--wg-surface)) !important;
color:var(--wg-primary) !important;
}
.chat-page .modern-chat .prompt-bar select{
min-height:48px !important;
height:48px !important;
border-radius:18px !important;
border:0 !important;
background:color-mix(in srgb,var(--wg-surface-muted) 90%,transparent) !important;
padding:0 12px !important;
font-size:14px !important;
color:var(--wg-text) !important;
box-shadow:none !important;
}
.chat-page .modern-chat .prompt-wrap{
min-width:0 !important;
align-self:stretch !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
}
.chat-page .modern-chat .prompt-wrap textarea{
min-height:54px !important;
max-height:240px !important;
padding:15px 2px 6px !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
resize:none !important;
font-size:15.5px !important;
line-height:1.45 !important;
}
.chat-page .modern-chat .prompt-wrap textarea:focus{
border:0 !important;
box-shadow:none !important;
}
.chat-page .modern-chat .prompt-wrap small{
display:none !important;
}
.chat-page .modern-chat .attachment-preview{
margin:0 0 2px !important;
gap:6px !important;
}
.chat-page .modern-chat .attachment-preview-chip{
min-height:30px !important;
padding:5px 9px !important;
border-radius:999px !important;
background:color-mix(in srgb,var(--wg-primary) 9%,var(--wg-surface-muted)) !important;
}
.chat-page .modern-chat .send-btn{
min-height:50px !important;
height:50px !important;
padding:0 20px !important;
border-radius:999px !important;
white-space:nowrap !important;
box-shadow:0 10px 28px color-mix(in srgb,var(--wg-primary) 22%,transparent) !important;
}
.chat-page .modern-chat .send-btn:hover{
transform:translateY(-1px) !important;
}
@media(max-width:1100px){
.chat-page{overflow:hidden !important}
.chat-page .app-shell.modern-chat{
grid-template-columns:280px minmax(0,1fr) !important;
height:100dvh !important;
min-height:100dvh !important;
}
.chat-page .modern-chat .sidebar{
position:relative !important;
height:100dvh !important;
min-height:0 !important;
border-bottom:0 !important;
}
.chat-page .modern-chat .workspace{
height:100dvh !important;
min-height:0 !important;
overflow:hidden !important;
}
.chat-page .modern-chat .topbar{
padding:12px 18px !important;
}
.chat-page .modern-chat .prompt-bar{
width:min(840px,calc(100% - 32px)) !important;
bottom:max(20px,env(safe-area-inset-bottom)) !important;
grid-template-columns:44px minmax(145px,220px) minmax(0,1fr) auto !important;
}
.chat-page .modern-chat .messages{
padding-left:22px !important;
padding-right:22px !important;
padding-bottom:188px !important;
}
}
@media(max-width:780px){
.chat-page .app-shell.modern-chat{
grid-template-columns:1fr !important;
overflow:auto !important;
}
.chat-page .modern-chat .sidebar{
height:auto !important;
max-height:42dvh !important;
min-height:0 !important;
border-right:0 !important;
border-bottom:1px solid var(--wg-border) !important;
}
.chat-page .modern-chat .workspace{
min-height:58dvh !important;
height:58dvh !important;
}
.chat-page .modern-chat .conversation-list{
max-height:180px !important;
}
.chat-page .modern-chat .topbar{
min-height:auto !important;
gap:10px !important;
flex-direction:column !important;
align-items:stretch !important;
}
.chat-page .modern-chat .prompt-bar{
grid-template-columns:42px minmax(0,1fr) auto !important;
grid-template-rows:auto auto !important;
width:calc(100% - 24px) !important;
bottom:max(12px,env(safe-area-inset-bottom)) !important;
min-height:112px !important;
border-radius:24px !important;
}
.chat-page .modern-chat .prompt-bar select{
grid-column:2 / 4 !important;
grid-row:1 !important;
}
.chat-page .modern-chat .attachment-picker{
grid-column:1 !important;
grid-row:1 !important;
}
.chat-page .modern-chat .prompt-wrap{
grid-column:1 / 3 !important;
grid-row:2 !important;
}
.chat-page .modern-chat .send-btn{
grid-column:3 !important;
grid-row:2 !important;
width:auto !important;
padding:0 16px !important;
}
.chat-page .modern-chat .messages{
padding:18px 14px 214px !important;
scroll-padding-bottom:214px !important;
}
}
@media(max-width:520px){
.chat-page .modern-chat .send-btn{
min-width:52px !important;
padding:0 14px !important;
}
.chat-page .modern-chat .send-btn span + *{display:none!important}
.chat-page .modern-chat .message.user .message-card{
max-width:88% !important;
}
}
/* Wizard Guru AI: sivupaneelin työkalut + siistitty chat-header 2026-06-02 */
.compact-chat-ui{
grid-template-columns:300px minmax(0,1fr);
gap:0;
padding:0;
height:100svh;
background:transparent;
}
.compact-chat-ui .sidebar{
height:100svh;
top:0;
border-radius:0;
border-width:0 1px 0 0;
box-shadow:none;
padding:20px 18px 18px;
background:color-mix(in srgb,var(--wg-sidebar) 92%,transparent);
backdrop-filter:blur(18px);
}
.compact-chat-ui .workspace{
gap:0;
height:100svh;
min-height:0;
grid-template-rows:78px minmax(0,1fr);
}
.compact-chat-ui .wizard-brand-banner{
margin-bottom:18px;
display:grid;
gap:6px;
justify-items:start;
}
.compact-chat-ui .brand-logo{
width:min(190px,100%);
height:auto;
object-fit:contain;
}
.compact-chat-ui .brand-subtitle{
font-size:13px;
color:var(--wg-muted);
padding-left:4px;
font-weight:400;
}
.compact-chat-ui .new-chat-btn{
min-height:48px;
border-radius:16px;
font-weight:500;
letter-spacing:0;
background:var(--wg-surface);
}
.sidebar-tools{
display:grid;
gap:10px;
margin-top:14px;
}
.side-tabs{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:6px;
padding:5px;
border:1px solid var(--wg-border);
border-radius:16px;
background:color-mix(in srgb,var(--wg-surface-muted) 68%,transparent);
}
.side-tab{
min-height:38px;
padding:0 8px;
border-radius:12px;
font-size:13px;
font-weight:500;
justify-content:center;
color:var(--wg-muted);
}
.side-tab.active{
background:var(--wg-surface);
color:var(--wg-text);
box-shadow:0 8px 20px rgba(15,23,42,.07);
}
.side-theme-btn{
min-height:42px;
border-radius:14px;
justify-content:flex-start;
padding-inline:14px;
font-weight:500;
}
.sidebar-section{
margin-top:14px;
padding:12px;
border:1px solid color-mix(in srgb,var(--wg-border) 78%,transparent);
background:color-mix(in srgb,var(--wg-surface) 72%,transparent);
border-radius:16px;
}
.side-section-title{
font-size:12px;
color:var(--wg-muted);
margin-bottom:8px;
font-weight:500;
}
.compact-chat-ui .sidebar-rename-form{
display:grid;
grid-template-columns:minmax(0,1fr) 36px;
gap:8px;
align-items:center;
}
.compact-chat-ui .sidebar-rename-form input{
width:100%;
min-width:0;
border:1px solid var(--wg-border);
background:var(--wg-surface);
color:var(--wg-text);
border-radius:12px;
padding:10px 12px;
font-size:15px;
font-weight:500;
outline:none;
}
.compact-chat-ui .sidebar-rename-form input:focus{
border-color:var(--wg-primary);
box-shadow:0 0 0 4px color-mix(in srgb,var(--wg-primary) 12%,transparent);
}
.compact-chat-ui .sidebar-rename-form .icon-button{
width:36px;
height:36px;
border-radius:12px;
}
.compact-chat-ui .conversation-list{
display:flex;
flex-direction:column;
gap:4px;
padding:14px 2px 12px;
}
.compact-chat-ui .conversation-link{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:10px;
padding:10px 12px;
min-height:42px;
border-radius:12px;
border:1px solid transparent;
background:transparent;
box-shadow:none;
}
.compact-chat-ui .conversation-link:hover{
background:color-mix(in srgb,var(--wg-primary) 5%,var(--wg-surface));
}
.compact-chat-ui .conversation-link.active{
background:color-mix(in srgb,var(--wg-primary) 13%,var(--wg-surface));
border-color:color-mix(in srgb,var(--wg-primary) 26%,var(--wg-border));
}
.compact-chat-ui .conversation-title-text{
font-weight:400;
font-size:15px;
}
.compact-chat-ui .conversation-link.active .conversation-title-text{
font-weight:500;
}
.compact-chat-ui .conversation-link small{
font-size:12px;
font-weight:400;
color:var(--wg-muted);
}
.compact-chat-ui .sidebar-bottom{
border-top:1px solid color-mix(in srgb,var(--wg-border) 70%,transparent);
padding-top:12px;
}
.compact-chat-ui .sidebar-bottom .btn{
font-weight:400;
min-height:44px;
border-radius:14px;
}
.compact-chat-ui .chat-clean-topbar{
min-height:78px;
border-radius:0;
border-width:0 0 1px 0;
box-shadow:none;
padding:0 32px;
background:color-mix(in srgb,var(--wg-surface) 82%,transparent);
backdrop-filter:blur(16px);
}
.chat-heading-clean{
min-width:0;
display:grid;
gap:2px;
}
.chat-heading-label{
color:var(--wg-muted);
font-size:13px;
font-weight:400;
}
.chat-heading-clean h1{
margin:0;
font-size:23px;
line-height:1.15;
font-weight:600;
letter-spacing:-.025em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:min(640px,55vw);
}
.chat-actions-only{
display:flex;
align-items:center;
gap:8px;
}
.compact-action{
min-height:38px;
border-radius:999px;
padding:0 14px;
font-weight:500;
background:color-mix(in srgb,var(--wg-surface) 75%,transparent);
}
.share-glyph{
font-size:16px;
line-height:1;
}
.compact-chat-ui .chat-panel{
height:100%;
min-height:0;
padding-bottom:104px;
}
.compact-chat-ui .messages{
height:100%;
padding:28px min(9vw,120px) 28px;
gap:20px;
}
.compact-chat-ui .prompt-bar{
left:50%;
right:auto;
transform:translateX(-50%);
bottom:18px;
width:min(980px,calc(100% - 56px));
border-radius:28px;
padding:10px;
grid-template-columns:48px 132px minmax(0,1fr) auto;
align-items:center;
box-shadow:0 16px 45px rgba(15,23,42,.12),0 0 0 1px color-mix(in srgb,var(--wg-border) 70%,transparent);
}
.compact-chat-ui .prompt-bar .attachment-plus{
width:44px;
height:44px;
border-radius:16px;
}
.compact-chat-ui .prompt-bar select{
width:132px;
min-width:132px;
height:44px;
padding:0 34px 0 14px;
border-radius:16px;
font-size:14px;
font-weight:500;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
background:color-mix(in srgb,var(--wg-surface-muted) 68%,var(--wg-surface));
}
.compact-chat-ui .prompt-wrap textarea{
min-height:44px;
padding:10px 12px;
border:0;
box-shadow:none;
background:transparent;
font-size:16px;
}
.compact-chat-ui .prompt-wrap textarea:focus{
box-shadow:none;
border-color:transparent;
}
.compact-chat-ui .prompt-wrap small{
display:none;
}
.compact-chat-ui .send-btn{
min-height:44px;
border-radius:22px;
padding:0 20px;
font-weight:600;
}
.compact-chat-ui .attachment-menu{
bottom:58px;
}
.compact-chat-ui .image-workbench,
.compact-chat-ui .file-workbench{
height:100%;
padding:28px 32px;
}
.compact-chat-ui .topbar-actions .segmented-tabs,
.compact-chat-ui .title-stack .eyebrow,
.compact-chat-ui .title-stack .tiny{
display:none!important;
}
@media(max-width:1100px){
.compact-chat-ui{
grid-template-columns:1fr;
height:auto;
min-height:100svh;
}
.compact-chat-ui .sidebar{
height:auto;
position:relative;
border-width:0 0 1px 0;
}
.compact-chat-ui .workspace{
height:calc(100svh - 1px);
grid-template-rows:72px minmax(0,1fr);
}
.compact-chat-ui .chat-clean-topbar{
padding:0 18px;
}
.chat-heading-clean h1{
max-width:54vw;
}
}
@media(max-width:720px){
.compact-chat-ui .prompt-bar{
width:calc(100% - 20px);
grid-template-columns:44px minmax(0,1fr) auto;
gap:8px;
bottom:10px;
border-radius:22px;
}
.compact-chat-ui .prompt-bar select{
display:none;
}
.compact-chat-ui .send-btn{
padding:0 14px;
}
.compact-chat-ui .send-btn .icon-send + *{
display:none;
}
.compact-chat-ui .messages{
padding:18px 14px 24px;
}
.chat-heading-clean h1{
max-width:48vw;
font-size:19px;
}
.compact-action{
padding:0 10px;
font-size:13px;
}
}
/* Wizard Guru AI 2026-06-02: siistitty sivupaneeli + transparent header ja kelluvat ikonipainikkeet */
.sr-only{
position:absolute!important;
width:1px!important;
height:1px!important;
padding:0!important;
margin:-1px!important;
overflow:hidden!important;
clip:rect(0,0,0,0)!important;
white-space:nowrap!important;
border:0!important;
}
.chat-page .app-shell.modern-chat.compact-chat-ui{
grid-template-columns:300px minmax(0,1fr)!important;
background:transparent!important;
}
.chat-page .modern-chat.compact-chat-ui .workspace{
position:relative!important;
display:grid!important;
grid-template-rows:minmax(0,1fr)!important;
height:100dvh!important;
min-height:0!important;
overflow:hidden!important;
gap:0!important;
}
.chat-page .modern-chat.compact-chat-ui .chat-panel{
height:100dvh!important;
min-height:0!important;
padding-bottom:0!important;
overflow:hidden!important;
}
.chat-page .modern-chat.compact-chat-ui .messages{
padding-top:54px!important;
padding-bottom:190px!important;
scroll-padding-bottom:190px!important;
}
/* Kelluvat ylätoiminnot: ei otsikkopalkkia, ei tekstiä */
.chat-page .modern-chat .chat-floating-actions,
.chat-page .modern-chat .topbar.chat-floating-actions{
position:absolute!important;
top:20px!important;
right:28px!important;
left:auto!important;
z-index:40!important;
width:auto!important;
min-height:0!important;
height:auto!important;
padding:0!important;
margin:0!important;
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:10px!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
backdrop-filter:none!important;
}
.floating-action-button{
width:46px;
height:46px;
border:1px solid color-mix(in srgb,var(--wg-border) 72%,transparent);
border-radius:999px;
background:color-mix(in srgb,var(--wg-surface) 76%,transparent);
color:var(--wg-text);
display:grid;
place-items:center;
font-size:18px;
line-height:1;
box-shadow:0 12px 32px rgba(15,23,42,.10),0 2px 8px rgba(15,23,42,.05);
backdrop-filter:blur(18px);
transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
}
.floating-action-button:hover{
transform:translateY(-1px);
background:color-mix(in srgb,var(--wg-primary) 9%,var(--wg-surface));
color:var(--wg-primary);
box-shadow:0 16px 42px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.05);
}
.floating-action-button .icon-download:before{font-size:19px;}
.floating-action-button .share-glyph{font-size:18px;}
/* Sivupaneeli: yleisempi, kevyempi ja helpompi lukea */
.chat-page .modern-chat.compact-chat-ui .sidebar{
width:300px!important;
padding:20px 16px 16px!important;
background:color-mix(in srgb,var(--wg-sidebar) 94%,transparent)!important;
border-right:1px solid color-mix(in srgb,var(--wg-border) 76%,transparent)!important;
box-shadow:none!important;
}
.chat-page.has-theme-background .modern-chat.compact-chat-ui .sidebar{
background:color-mix(in srgb,var(--wg-sidebar) 88%,transparent)!important;
}
.compact-chat-ui .sidebar-top{
gap:12px!important;
}
.compact-chat-ui .wizard-brand-banner{
margin:0 0 8px!important;
padding:0 4px!important;
gap:4px!important;
min-height:0!important;
}
.compact-chat-ui .wizard-brand-banner .brand-logo,
.chat-page .modern-chat .wizard-brand-banner .brand-logo{
width:184px!important;
height:58px!important;
object-fit:contain!important;
object-position:left center!important;
}
.compact-chat-ui .brand-subtitle{
padding-left:2px!important;
font-size:12px!important;
line-height:1.2!important;
color:var(--wg-muted)!important;
}
.compact-chat-ui .new-chat-btn{
min-height:46px!important;
border-radius:14px!important;
justify-content:flex-start!important;
padding:0 14px!important;
font-size:14px!important;
font-weight:500!important;
background:color-mix(in srgb,var(--wg-surface) 88%,transparent)!important;
box-shadow:none!important;
}
.compact-chat-ui .new-chat-btn:hover{
background:color-mix(in srgb,var(--wg-primary) 6%,var(--wg-surface))!important;
box-shadow:none!important;
transform:none!important;
}
.sidebar-tools{
margin-top:2px!important;
gap:8px!important;
}
.sidebar-tools:before,
.compact-chat-ui .conversation-list:before{
display:block;
margin:4px 8px 2px;
color:var(--wg-muted);
font-size:11px;
font-weight:500;
letter-spacing:.06em;
text-transform:uppercase;
}
.sidebar-tools:before{content:'Työkalut';}
.compact-chat-ui .conversation-list:before{content:'Keskustelut';}
.compact-chat-ui .side-tabs{
display:grid!important;
grid-template-columns:1fr!important;
gap:2px!important;
padding:0!important;
border:0!important;
background:transparent!important;
border-radius:0!important;
}
.compact-chat-ui .side-tab{
justify-content:flex-start!important;
min-height:38px!important;
padding:0 10px!important;
border-radius:11px!important;
font-size:14px!important;
font-weight:400!important;
color:color-mix(in srgb,var(--wg-sidebar-text) 72%,var(--wg-muted))!important;
background:transparent!important;
box-shadow:none!important;
}
.compact-chat-ui .side-tab span[class^=icon-]{
width:22px;
height:22px;
display:grid;
place-items:center;
color:var(--wg-muted);
}
.compact-chat-ui .side-tab:hover{
background:color-mix(in srgb,var(--wg-primary) 5%,var(--wg-surface))!important;
color:var(--wg-text)!important;
}
.compact-chat-ui .side-tab.active{
background:color-mix(in srgb,var(--wg-primary) 8%,var(--wg-surface))!important;
color:var(--wg-text)!important;
font-weight:500!important;
}
.compact-chat-ui .side-tab.active span[class^=icon-]{color:var(--wg-primary);}
.compact-chat-ui .side-theme-btn{
min-height:38px!important;
border:0!important;
border-radius:11px!important;
background:transparent!important;
justify-content:flex-start!important;
padding:0 10px!important;
font-size:14px!important;
font-weight:400!important;
color:color-mix(in srgb,var(--wg-sidebar-text) 72%,var(--wg-muted))!important;
}
.compact-chat-ui .side-theme-btn:hover{
transform:none!important;
box-shadow:none!important;
background:color-mix(in srgb,var(--wg-primary) 5%,var(--wg-surface))!important;
color:var(--wg-text)!important;
}
.compact-chat-ui .active-conversation-editor,
.compact-chat-ui .sidebar-section.active-conversation-editor{
margin-top:8px!important;
padding:10px!important;
border-radius:14px!important;
background:color-mix(in srgb,var(--wg-surface) 62%,transparent)!important;
border:1px solid color-mix(in srgb,var(--wg-border) 66%,transparent)!important;
box-shadow:none!important;
}
.compact-chat-ui .side-section-title{
margin:0 0 7px!important;
font-size:11px!important;
letter-spacing:.04em!important;
text-transform:uppercase!important;
font-weight:500!important;
color:var(--wg-muted)!important;
}
.compact-chat-ui .sidebar-rename-form{
grid-template-columns:minmax(0,1fr) 34px!important;
gap:7px!important;
}
.compact-chat-ui .sidebar-rename-form input{
min-height:38px!important;
padding:0 10px!important;
border-radius:11px!important;
font-size:14px!important;
font-weight:400!important;
background:color-mix(in srgb,var(--wg-surface) 86%,transparent)!important;
box-shadow:none!important;
}
.compact-chat-ui .sidebar-rename-form .icon-button{
width:34px!important;
height:34px!important;
border-radius:11px!important;
background:color-mix(in srgb,var(--wg-surface) 86%,transparent)!important;
box-shadow:none!important;
}
.compact-chat-ui .conversation-list{
gap:1px!important;
padding:12px 0 10px!important;
border-top:1px solid color-mix(in srgb,var(--wg-border) 54%,transparent)!important;
margin-top:12px!important;
}
.compact-chat-ui .conversation-link,
.chat-page .modern-chat .conversation-link{
position:relative!important;
min-height:36px!important;
padding:7px 9px 7px 12px!important;
border-radius:10px!important;
grid-template-columns:minmax(0,1fr) auto!important;
gap:8px!important;
border:0!important;
background:transparent!important;
color:color-mix(in srgb,var(--wg-sidebar-text) 82%,var(--wg-muted))!important;
box-shadow:none!important;
}
.compact-chat-ui .conversation-link:before{
content:'';
position:absolute;
left:2px;
top:9px;
bottom:9px;
width:3px;
border-radius:999px;
background:transparent;
}
.compact-chat-ui .conversation-link:hover{
background:color-mix(in srgb,var(--wg-primary) 5%,var(--wg-surface))!important;
}
.compact-chat-ui .conversation-link.active,
.chat-page .modern-chat .conversation-link.active{
background:color-mix(in srgb,var(--wg-primary) 7%,var(--wg-surface))!important;
color:var(--wg-sidebar-text)!important;
}
.compact-chat-ui .conversation-link.active:before{background:var(--wg-primary);}
.compact-chat-ui .conversation-title-text,
.chat-page .modern-chat .conversation-title-text{
font-size:14px!important;
line-height:1.2!important;
font-weight:400!important;
letter-spacing:0!important;
}
.compact-chat-ui .conversation-link.active .conversation-title-text{
font-weight:500!important;
}
.compact-chat-ui .conversation-link small,
.chat-page .modern-chat .conversation-link small{
font-size:11px!important;
line-height:1!important;
color:var(--wg-muted)!important;
}
.compact-chat-ui .sidebar-bottom{
gap:6px!important;
padding-top:10px!important;
border-top:1px solid color-mix(in srgb,var(--wg-border) 54%,transparent)!important;
}
.compact-chat-ui .sidebar-bottom .btn{
justify-content:flex-start!important;
min-height:40px!important;
border:0!important;
border-radius:11px!important;
background:transparent!important;
padding:0 10px!important;
font-size:14px!important;
font-weight:400!important;
box-shadow:none!important;
}
.compact-chat-ui .sidebar-bottom .btn:hover{
transform:none!important;
background:color-mix(in srgb,var(--wg-primary) 5%,var(--wg-surface))!important;
}
.compact-chat-ui .sidebar-bottom form .btn{
color:var(--wg-muted)!important;
}
/* Promptin malli vielä kompaktimmaksi yläpalkin poiston jälkeen */
.compact-chat-ui .prompt-bar{
width:min(980px,calc(100% - 60px))!important;
grid-template-columns:48px 116px minmax(0,1fr) auto!important;
}
.compact-chat-ui .prompt-bar select{
width:116px!important;
min-width:116px!important;
}
@media(max-width:1100px){
.chat-page .app-shell.modern-chat.compact-chat-ui{
grid-template-columns:280px minmax(0,1fr)!important;
}
.chat-page .modern-chat.compact-chat-ui .sidebar{
width:280px!important;
}
.chat-page .modern-chat .chat-floating-actions,
.chat-page .modern-chat .topbar.chat-floating-actions{
top:14px!important;
right:18px!important;
}
.floating-action-button{width:42px;height:42px;}
.compact-chat-ui .prompt-bar{
grid-template-columns:44px 108px minmax(0,1fr) auto!important;
}
.compact-chat-ui .prompt-bar select{width:108px!important;min-width:108px!important;}
}
@media(max-width:780px){
.chat-page .app-shell.modern-chat.compact-chat-ui{
grid-template-columns:1fr!important;
overflow:auto!important;
}
.chat-page .modern-chat.compact-chat-ui .sidebar{
width:100%!important;
max-height:44dvh!important;
}
.chat-page .modern-chat.compact-chat-ui .workspace{
height:56dvh!important;
min-height:520px!important;
}
.chat-page .modern-chat.compact-chat-ui .chat-panel{
height:56dvh!important;
min-height:520px!important;
}
.chat-page .modern-chat .chat-floating-actions,
.chat-page .modern-chat .topbar.chat-floating-actions{
top:10px!important;
right:12px!important;
gap:8px!important;
}
.floating-action-button{width:40px;height:40px;}
.compact-chat-ui .side-tabs{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.compact-chat-ui .side-tab{
justify-content:center!important;
padding:0 8px!important;
}
.compact-chat-ui .messages{
padding-top:56px!important;
padding-bottom:220px!important;
}
.compact-chat-ui .prompt-bar{
grid-template-columns:44px minmax(0,1fr) auto!important;
}
.compact-chat-ui .prompt-bar select{display:none!important;}
}
/* Wizard AI 2026-06-02: työkalut menuun + keskustelun nimen muokkaus suoraan listassa */
.chat-page .modern-chat.compact-chat-ui .sidebar{
display:flex!important;
flex-direction:column!important;
gap:0!important;
}
.compact-chat-ui .sidebar-top{
flex:0 0 auto!important;
gap:12px!important;
}
.compact-chat-ui .sidebar-tools,
.compact-chat-ui .active-conversation-editor,
.compact-chat-ui .sidebar-section.active-conversation-editor{
display:none!important;
}
.sidebar-tools-menu{
position:relative!important;
margin:2px 0 0!important;
}
.sidebar-tools-menu[open]{z-index:45!important;}
.sidebar-tools-menu summary{list-style:none!important;}
.sidebar-tools-menu summary::-webkit-details-marker{display:none!important;}
.sidebar-menu-trigger{
min-height:42px!important;
width:100%!important;
border:1px solid color-mix(in srgb,var(--wg-border) 78%,transparent)!important;
border-radius:14px!important;
background:color-mix(in srgb,var(--wg-surface) 82%,transparent)!important;
color:var(--wg-sidebar-text)!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:10px!important;
padding:0 13px!important;
cursor:pointer!important;
font-size:14px!important;
font-weight:500!important;
box-shadow:none!important;
}
.sidebar-menu-trigger:hover{
background:color-mix(in srgb,var(--wg-primary) 6%,var(--wg-surface))!important;
}
.menu-trigger-left{display:inline-flex!important;align-items:center!important;gap:9px!important;min-width:0!important;}
.menu-trigger-left span[class^=icon-]{width:18px!important;height:18px!important;display:grid!important;place-items:center!important;color:var(--wg-primary)!important;}
.menu-chevron{color:var(--wg-muted)!important;font-size:14px!important;transition:transform .16s ease!important;}
.sidebar-tools-menu[open] .menu-chevron{transform:rotate(180deg)!important;}
.sidebar-menu-panel{
position:absolute!important;
left:0!important;
right:0!important;
top:calc(100% + 8px)!important;
border:1px solid color-mix(in srgb,var(--wg-border) 82%,transparent)!important;
border-radius:16px!important;
background:color-mix(in srgb,var(--wg-surface) 96%,transparent)!important;
box-shadow:0 18px 55px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.05)!important;
backdrop-filter:blur(20px)!important;
padding:7px!important;
}
.compact-chat-ui .compact-tool-tabs,
.compact-chat-ui .side-tabs.compact-tool-tabs{
display:grid!important;
grid-template-columns:1fr!important;
gap:2px!important;
padding:0!important;
border:0!important;
background:transparent!important;
}
.compact-chat-ui .sidebar-menu-panel .side-tab,
.compact-chat-ui .sidebar-menu-panel .side-theme-btn{
min-height:38px!important;
border-radius:11px!important;
padding:0 10px!important;
justify-content:flex-start!important;
font-size:14px!important;
font-weight:400!important;
background:transparent!important;
border:0!important;
color:color-mix(in srgb,var(--wg-sidebar-text) 76%,var(--wg-muted))!important;
box-shadow:none!important;
}
.compact-chat-ui .sidebar-menu-panel .side-tab:hover,
.compact-chat-ui .sidebar-menu-panel .side-theme-btn:hover,
.compact-chat-ui .sidebar-menu-panel .side-tab.active{
background:color-mix(in srgb,var(--wg-primary) 7%,var(--wg-surface))!important;
color:var(--wg-text)!important;
transform:none!important;
}
.conversation-section-head{
flex:0 0 auto!important;
margin:14px 10px 6px!important;
color:var(--wg-muted)!important;
font-size:11px!important;
font-weight:500!important;
letter-spacing:.06em!important;
text-transform:uppercase!important;
}
.compact-chat-ui .conversation-list{
display:flex!important;
flex-direction:column!important;
gap:2px!important;
padding:0 0 10px!important;
margin-top:0!important;
border-top:0!important;
overflow:auto!important;
min-height:0!important;
}
.compact-chat-ui .conversation-list:before{content:none!important;display:none!important;}
.compact-chat-ui .conversation-link,
.chat-page .modern-chat .conversation-link{
display:grid!important;
align-items:center!important;
grid-template-columns:minmax(0,1fr) auto!important;
min-height:38px!important;
padding:7px 10px 7px 14px!important;
border-radius:11px!important;
gap:9px!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
color:color-mix(in srgb,var(--wg-sidebar-text) 84%,var(--wg-muted))!important;
}
.compact-chat-ui .conversation-link:hover{
background:color-mix(in srgb,var(--wg-primary) 5%,var(--wg-surface))!important;
}
.compact-chat-ui .conversation-link.active,
.chat-page .modern-chat .conversation-link.active{
background:color-mix(in srgb,var(--wg-primary) 7%,var(--wg-surface))!important;
}
.compact-chat-ui .conversation-rename-row{
grid-template-columns:minmax(0,1fr) auto 32px!important;
cursor:default!important;
}
.compact-chat-ui .conversation-title-input{
min-width:0!important;
width:100%!important;
border:0!important;
outline:0!important;
padding:0!important;
margin:0!important;
background:transparent!important;
color:var(--wg-sidebar-text)!important;
font-size:14px!important;
font-weight:500!important;
line-height:1.2!important;
box-shadow:none!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.compact-chat-ui .conversation-title-input:focus{
color:var(--wg-text)!important;
box-shadow:0 1px 0 var(--wg-primary)!important;
}
.inline-save-button{
width:30px!important;
height:30px!important;
border:1px solid color-mix(in srgb,var(--wg-border) 70%,transparent)!important;
border-radius:10px!important;
display:grid!important;
place-items:center!important;
background:color-mix(in srgb,var(--wg-surface) 82%,transparent)!important;
color:var(--wg-primary)!important;
padding:0!important;
opacity:.72!important;
}
.inline-save-button:hover,
.conversation-rename-row:focus-within .inline-save-button{
opacity:1!important;
background:color-mix(in srgb,var(--wg-primary) 10%,var(--wg-surface))!important;
}
.compact-chat-ui .conversation-title-text,
.chat-page .modern-chat .conversation-title-text{
font-size:14px!important;
font-weight:400!important;
line-height:1.2!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.compact-chat-ui .conversation-link small,
.chat-page .modern-chat .conversation-link small{
font-size:11px!important;
color:var(--wg-muted)!important;
}
/* Kelluvat actionit aina vain ikoneina, vaikka vanha selainvälimuisti näyttäisi tekstiä */
.chat-page .modern-chat .chat-floating-actions,
.chat-page .modern-chat .topbar.chat-floating-actions{
pointer-events:none!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
}
.chat-page .modern-chat .chat-floating-actions > *,
.chat-page .modern-chat .topbar.chat-floating-actions > *{pointer-events:auto!important;}
.floating-action-button{
width:44px!important;
height:44px!important;
padding:0!important;
font-size:0!important;
overflow:hidden!important;
}
.floating-action-button span,
.floating-action-button svg,
.floating-action-button:before{
font-size:18px!important;
}
.floating-action-button.is-copied{color:var(--wg-primary)!important;background:color-mix(in srgb,var(--wg-primary) 12%,var(--wg-surface))!important;}
@media(max-width:780px){
.sidebar-menu-panel{position:static!important;margin-top:8px!important;}
.compact-chat-ui .conversation-rename-row{grid-template-columns:minmax(0,1fr) auto 32px!important;}
}
/* Wizard AI 2026-06-02: henkilökohtainen tausta korjaus + premium-kuvanluonti */
.chat-page.has-theme-background .modern-chat .chat-bg-personal,
.chat-page .modern-chat .chat-bg-personal{
background-image:linear-gradient(rgba(247,247,248,var(--wg-bg-overlay)),rgba(247,247,248,var(--wg-bg-overlay))),var(--wg-bg-image)!important;
background-size:cover!important;
background-position:center!important;
background-repeat:no-repeat!important;
filter:none!important;
}
.chat-page .modern-chat .workspace,
.chat-page .modern-chat .chat-panel{
background:transparent!important;
}
.chat-page .modern-chat .messages{
background:transparent!important;
}
.chat-page .modern-chat .sidebar{
background:color-mix(in srgb,var(--wg-sidebar) 86%,transparent)!important;
backdrop-filter:blur(18px)!important;
}
.chat-page .modern-chat .prompt-bar{
background:color-mix(in srgb,var(--wg-surface) 84%,transparent)!important;
backdrop-filter:blur(22px)!important;
}
.image-workbench{
grid-template-columns:minmax(330px,420px) minmax(0,1fr)!important;
align-items:start!important;
}
.premium-image-form{
position:sticky;
top:20px;
border-radius:22px!important;
gap:13px!important;
}
.image-options-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.image-options-grid label{
min-width:0;
}
.advanced-image-settings{
border:1px solid var(--wg-border);
border-radius:16px;
padding:10px 12px;
background:color-mix(in srgb,var(--wg-surface-muted) 60%,transparent);
}
.advanced-image-settings summary{
cursor:pointer;
font-size:13px;
color:var(--wg-muted);
font-weight:500;
}
.advanced-image-settings[open] summary{margin-bottom:10px;color:var(--wg-text)}
.nsfw-toggle{
display:flex!important;
align-items:center!important;
gap:10px!important;
padding:12px!important;
border:1px solid color-mix(in srgb,var(--wg-primary) 22%,var(--wg-border));
border-radius:16px;
background:color-mix(in srgb,var(--wg-primary) 6%,var(--wg-surface));
}
.nsfw-toggle.disabled,
.nsfw-toggle.provider-disabled{
opacity:.58;
background:var(--wg-surface-muted);
}
.image-badge{
width:max-content;
display:inline-flex;
align-items:center;
min-height:24px;
padding:0 8px;
border-radius:999px;
font-size:11px;
color:var(--wg-primary);
background:color-mix(in srgb,var(--wg-primary) 10%,transparent);
border:1px solid color-mix(in srgb,var(--wg-primary) 18%,transparent);
}
.image-card-loading{
min-height:280px;
}
.image-loading-shimmer{
aspect-ratio:1/1;
border-radius:18px 18px 0 0;
background:linear-gradient(90deg, var(--wg-surface-muted), color-mix(in srgb,var(--wg-primary) 10%,var(--wg-surface)), var(--wg-surface-muted));
background-size:200% 100%;
animation:wizardShimmer 1.15s linear infinite;
}
@keyframes wizardShimmer{to{background-position:-200% 0}}
.image-generate-button{
min-height:52px!important;
border-radius:16px!important;
box-shadow:0 18px 42px color-mix(in srgb,var(--wg-primary) 24%,transparent)!important;
}
@media(max-width:1100px){
.image-workbench{grid-template-columns:1fr!important;padding:16px!important}
.premium-image-form{position:relative;top:auto}
}
@media(max-width:680px){
.image-options-grid{grid-template-columns:1fr}
}
/* Wizard AI 2026-06-02: yhtenäinen ikonijärjestelmä + Replicate-korjauspatchin UI-siistintä */
.ui-icon{
width:1.08em;
height:1.08em;
display:inline-block;
vertical-align:-.17em;
fill:none;
stroke:currentColor;
stroke-width:1.85;
stroke-linecap:round;
stroke-linejoin:round;
flex:0 0 auto;
}
button .ui-icon,
.btn .ui-icon,
.sidebar-menu-trigger .ui-icon,
.conversation-link .ui-icon,
.admin-nav-link .ui-icon,
.attachment-chip .ui-icon,
.attachment-menu .ui-icon,
.mini-btn .ui-icon{
margin-right:.52rem;
}
.icon-button .ui-icon,
.floating-action-button .ui-icon,
.inline-save-button .ui-icon,
.attachment-plus .ui-icon{
margin-right:0;
}
.floating-action-button{
display:grid!important;
place-items:center!important;
color:var(--wg-text)!important;
}
.floating-action-button .ui-icon{
width:20px!important;
height:20px!important;
stroke-width:1.75!important;
}
.floating-action-button:hover,
.floating-action-button.is-copied{
color:var(--wg-primary)!important;
border-color:color-mix(in srgb,var(--wg-primary) 24%,var(--wg-border))!important;
}
.compact-chat-ui .sidebar-menu-trigger .ui-icon,
.compact-chat-ui .sidebar-menu-panel .ui-icon,
.compact-chat-ui .side-theme-btn .ui-icon,
.compact-chat-ui .new-chat-btn .ui-icon{
color:var(--wg-primary)!important;
width:18px!important;
height:18px!important;
}
.compact-chat-ui .conversation-link{
font-weight:400!important;
line-height:1.2!important;
}
.compact-chat-ui .conversation-link small{
font-size:12px!important;
font-weight:400!important;
opacity:.74!important;
}
.compact-chat-ui .conversation-title-text,
.compact-chat-ui .conversation-title-input{
font-weight:400!important;
}
.compact-chat-ui .conversation-link.active .conversation-title-input,
.compact-chat-ui .conversation-link.active .conversation-title-text{
font-weight:500!important;
}
.compact-chat-ui .sidebar-bottom .btn,
.compact-chat-ui .sidebar-top .btn,
.compact-chat-ui .sidebar-menu-trigger{
font-weight:400!important;
}
.compact-chat-ui .new-chat-btn{
justify-content:center!important;
}
.compact-chat-ui .attachment-menu button{
display:flex!important;
align-items:center!important;
gap:10px!important;
}
.compact-chat-ui .attachment-menu button .ui-icon{
margin-right:0!important;
color:var(--wg-primary)!important;
width:18px!important;
height:18px!important;
}
.attachment-chip .attachment-icon,
.attachment-preview-chip > span:first-child{
width:24px;
height:24px;
display:grid;
place-items:center;
color:var(--wg-primary);
}
.attachment-chip .attachment-icon .ui-icon,
.attachment-preview-chip .ui-icon{
width:18px;
height:18px;
margin:0!important;
}
.code-head .copy-code{
display:inline-flex!important;
align-items:center!important;
gap:7px!important;
}
.code-head .copy-code .ui-icon{
margin-right:0!important;
width:17px!important;
height:17px!important;
}
.image-actions .mini-btn{
display:inline-flex!important;
align-items:center!important;
gap:6px!important;
}
.image-actions .mini-btn .ui-icon{
margin-right:0!important;
width:16px!important;
height:16px!important;
}
.image-generate-button .ui-icon,
.send-btn .ui-icon{
margin-right:.55rem!important;
}
.modern-admin .admin-nav-link{
font-weight:400!important;
letter-spacing:0!important;
}
.modern-admin .admin-nav-link.active{
font-weight:500!important;
}
.modern-admin .admin-nav-link .nav-icon,
.modern-admin .admin-nav-link .ui-icon{
width:19px!important;
height:19px!important;
margin-right:0!important;
color:var(--wg-primary)!important;
}
.modern-admin .admin-sidebar-footer .btn{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:9px!important;
font-weight:400!important;
}
.modern-admin .admin-sidebar-footer .btn .ui-icon{
margin-right:0!important;
}
.modern-admin .brand-row strong,
.modern-admin h1,
.modern-admin h2,
.modern-admin h3{
font-weight:600!important;
}
/* Wizard AI PWA + mobile polish 2026-06-02 */
html{height:100%;overflow-x:hidden}body{min-height:100%;overflow-x:hidden}.hidden{display:none!important}.svg-sprite{position:absolute!important;width:0!important;height:0!important;overflow:hidden!important}.ui-icon{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:0;flex:0 0 auto}span[class^="icon-"],span[class*=" icon-"],i[class^="icon-"],i[class*=" icon-"],.nav-icon{display:inline-grid;place-items:center;line-height:1}.icon-plus:before,.icon-settings:before,.icon-check:before,.icon-chat:before,.icon-image:before,.icon-folder:before,.icon-send:before,.icon-spark:before,.icon-sparkle:before,.icon-download:before,.icon-x:before,.icon-grid:before,.icon-palette:before,.icon-users:before,.icon-logs:before,.icon-trash:before,.icon-credit:before,.icon-shield:before,.icon-lock:before,.icon-file:before,.icon-code:before,.icon-clip:before,.icon-menu:before{content:none!important}.mobile-sidebar-toggle,.mobile-sidebar-backdrop{display:none}.pwa-install{border-style:dashed!important}.modern-chat.compact-chat-ui{height:100dvh;min-height:100dvh}.modern-chat .sidebar{height:100dvh}.modern-chat .workspace{height:100dvh;min-height:0}.modern-chat .chat-panel{height:100dvh}.modern-chat .panel.active-panel:not(.chat-panel){height:100dvh;overflow:auto}.compact-chat-ui .chat-floating-actions{position:absolute!important;top:12px!important;right:14px!important;z-index:30!important;display:flex!important;gap:8px!important;min-height:0!important;padding:0!important;background:transparent!important;border:0!important}.compact-chat-ui .floating-action-button{width:42px!important;height:42px!important;border-radius:999px!important;background:color-mix(in srgb,var(--wg-surface) 82%,transparent)!important;backdrop-filter:blur(14px)!important}.compact-chat-ui .messages{padding-top:54px!important}.compact-chat-ui .message-card{word-break:break-word;overflow-wrap:anywhere}.compact-chat-ui .conversation-row-item{min-height:38px!important}.compact-chat-ui .conversation-link{padding:8px 9px!important}.compact-chat-ui .conversation-title-input{min-width:0!important;width:100%!important}.compact-chat-ui .conversation-section-head{font-size:11px!important;text-transform:uppercase;letter-spacing:.08em;color:var(--wg-muted);margin:14px 2px 2px}.compact-chat-ui .sidebar-plan-card{display:none!important}.prompt-bar{padding-bottom:max(12px,env(safe-area-inset-bottom))!important}.prompt-bar select{max-width:100%;text-overflow:ellipsis}.prompt-wrap textarea{line-height:1.5}.landing-header,.guest-chat-card,.plan-card,.plan-mini-card,.admin-sidebar,.sidebar,.prompt-bar{max-width:100%}.landing-copy h1,.billing-hero h1{overflow-wrap:anywhere}.feature-strip span .ui-icon,.guest-prompt .ui-icon,.landing-header .ui-icon{width:18px;height:18px}
@media (max-width: 980px){
.landing-shell,.billing-shell{padding:12px!important}.landing-header{position:sticky;top:8px;z-index:20;background:color-mix(in srgb,var(--wg-surface) 92%,transparent)!important;backdrop-filter:blur(16px);margin-bottom:16px!important}.landing-header nav{width:100%;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.landing-header .btn{min-height:42px;padding:0 10px}.landing-grid{grid-template-columns:1fr!important}.guest-chat-card{min-height:calc(100dvh - 140px);border-radius:22px!important}.guest-messages{min-height:260px}.landing-plans-preview{grid-template-columns:1fr 1fr!important}.plans-grid{grid-template-columns:1fr 1fr!important}.admin-two-col{grid-template-columns:1fr!important}.admin-main{padding:18px!important}.admin-shell{grid-template-columns:1fr!important;padding:0!important}.admin-sidebar{height:auto!important;position:relative!important;top:auto!important;border-radius:0!important;border-left:0!important;border-right:0!important;border-top:0!important}.admin-nav{display:flex!important;overflow-x:auto;padding-bottom:6px;gap:6px!important}.admin-nav-link{white-space:nowrap;min-height:42px}.admin-sidebar-footer{grid-template-columns:repeat(3,1fr);margin-top:12px!important}.admin-sidebar-footer .btn{font-size:13px;padding:0 10px}.theme-editor-grid,.image-workbench,.file-workbench{grid-template-columns:1fr!important}.image-workbench,.file-workbench{padding:18px!important}.form-grid.four,.form-grid.five,.form-grid.two,.form-grid{grid-template-columns:1fr 1fr!important}.form-grid .wide,.full-width{grid-column:1/-1!important}
}
@media (max-width: 900px){
.mobile-sidebar-toggle{display:grid;place-items:center;position:fixed;left:12px;top:calc(12px + env(safe-area-inset-top));z-index:60;width:42px;height:42px;border-radius:999px;border:1px solid var(--wg-border);background:color-mix(in srgb,var(--wg-surface) 88%,transparent);backdrop-filter:blur(14px);color:var(--wg-text);box-shadow:0 10px 36px rgba(15,23,42,.12)}
.mobile-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:48;background:rgba(15,23,42,.22);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.18s ease}.sidebar-open .mobile-sidebar-backdrop{opacity:1;pointer-events:auto}
.modern-chat.compact-chat-ui{display:block!important;padding:0!important;height:100dvh;min-height:100dvh;background:var(--wg-surface)}
.modern-chat .sidebar{position:fixed!important;z-index:55;left:0;top:0;bottom:0;width:min(86vw,330px);height:100dvh!important;transform:translateX(-105%);transition:transform .22s ease;border-right:1px solid var(--wg-border)!important;box-shadow:18px 0 70px rgba(15,23,42,.16)!important;padding-top:calc(16px + env(safe-area-inset-top))!important;overflow:auto}.sidebar-open .modern-chat .sidebar{transform:translateX(0)}
.modern-chat .workspace{height:100dvh!important;min-height:100dvh!important;width:100%;display:block!important;background:transparent!important}
.modern-chat .chat-panel{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;background:transparent!important}.modern-chat .panel.active-panel:not(.chat-panel){height:100dvh!important;min-height:100dvh!important;overflow:auto!important;padding-top:calc(58px + env(safe-area-inset-top))}
.compact-chat-ui .chat-floating-actions{top:calc(12px + env(safe-area-inset-top))!important;right:12px!important}.compact-chat-ui .floating-action-button{width:40px!important;height:40px!important}.compact-chat-ui .floating-action-button.danger{display:none!important}
.modern-chat .messages{height:100dvh!important;padding:calc(62px + env(safe-area-inset-top)) 14px calc(154px + env(safe-area-inset-bottom))!important;overflow:auto!important}.modern-chat .message{max-width:100%;padding:13px 0!important;gap:10px!important}.modern-chat .message:not(.user) .message-card{max-width:calc(100% - 42px)!important}.modern-chat .message.user .message-card{max-width:86%!important;border-radius:20px!important}.modern-chat .message-body{font-size:15.5px!important;line-height:1.62!important}.modern-chat .message-meta{font-size:11px!important}.modern-chat .avatar{width:28px!important;height:28px!important}
.modern-chat .prompt-bar{position:fixed!important;left:10px!important;right:10px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;transform:none!important;width:auto!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:8px!important;padding:8px!important;border-radius:24px!important;z-index:35!important}.modern-chat .prompt-bar select{grid-column:1/-1;min-height:36px!important;font-size:13px;padding:8px 10px!important}.modern-chat .attachment-plus{width:40px;height:40px}.modern-chat .prompt-wrap textarea{min-height:42px!important;padding:11px 8px!important;font-size:16px!important}.modern-chat .send-btn{width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;font-size:0!important}.modern-chat .send-btn .ui-icon{margin:0!important;width:19px!important;height:19px!important}.attachment-menu{position:fixed!important;left:12px!important;right:12px!important;bottom:calc(112px + env(safe-area-inset-bottom))!important;width:auto!important}.attachment-menu button{min-height:46px}.attachment-preview{max-height:74px;overflow:auto}.image-workbench,.file-workbench{padding:68px 12px 24px!important;display:block!important}.image-form,.bundle-form{margin-bottom:16px}.image-options-grid{grid-template-columns:1fr 1fr!important}.modal{padding:12px!important}.modal-card{max-width:100%!important;border-radius:20px!important}.user-theme-modal{width:100%!important}.personal-theme-grid{grid-template-columns:1fr 1fr!important}.personal-theme-fields{grid-template-columns:1fr!important}
}
@media (max-width: 640px){
.landing-header nav{grid-template-columns:1fr 1fr!important}.landing-header nav .btn.primary{grid-column:auto}.landing-header .brand-logo{width:168px!important;height:46px!important}.landing-copy h1,.billing-hero h1{font-size:clamp(34px,11vw,48px)!important;line-height:1!important}.landing-copy .lead,.billing-hero .muted{font-size:16px!important}.feature-strip{display:grid!important;grid-template-columns:1fr 1fr}.guest-chat-card{padding:12px!important}.guest-prompt{grid-template-columns:1fr auto!important}.guest-prompt select{grid-column:1/-1}.guest-prompt textarea{font-size:16px}.guest-bubble{max-width:88%}.landing-plans-preview,.plans-grid{grid-template-columns:1fr!important}.plan-card,.plan-mini-card{border-radius:20px!important}.plan-price{font-size:30px!important}.form-grid.four,.form-grid.five,.form-grid.two,.form-grid{grid-template-columns:1fr!important}.admin-sidebar-footer{grid-template-columns:1fr!important}.admin-page-head,.section-head{display:grid!important}.stats-grid{grid-template-columns:1fr!important}.responsive-table table{min-width:720px}.image-options-grid,.personal-theme-grid{grid-template-columns:1fr!important}.modal-actions,.split-actions{display:grid!important;grid-template-columns:1fr!important}.modal-actions .btn{width:100%}.chat-panel .hero-empty{padding:16vh 18px 0!important}.chat-panel .hero-empty h2{font-size:30px!important}.prompt-bar .attachment-picker{align-self:end}.floating-action-button{box-shadow:0 8px 28px rgba(15,23,42,.10)!important}
}
/* Wizard AI chat-native actions: real zip/patch/image outputs returned inside chat. */
.agent-action-results {
display: grid;
gap: 12px;
margin-top: 14px;
width: min(100%, 760px);
}
.agent-action-card {
border: 1px solid color-mix(in srgb, var(--wg-border, #dcdce4), transparent 18%);
background: color-mix(in srgb, var(--wg-surface, #ffffff), transparent 4%);
border-radius: calc(var(--wg-radius, 18px) - 2px);
padding: 14px;
box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}
.agent-action-card.error {
border-color: rgba(220, 38, 38, .22);
background: rgba(254, 242, 242, .82);
}
.agent-action-head {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 6px;
}
.agent-action-head strong {
font-weight: 650;
}
.agent-action-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0;
}
.agent-action-card details {
margin-top: 8px;
}
.agent-action-card summary {
cursor: pointer;
color: var(--wg-muted, #6b7280);
font-size: .9rem;
}
.agent-action-card ul {
margin: 8px 0 0;
padding-left: 20px;
max-height: 220px;
overflow: auto;
}
.agent-action-card code {
font-size: .88em;
}
.agent-image-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
margin-top: 10px;
}
.agent-image-card {
margin: 0;
border: 1px solid var(--wg-border, #dcdce4);
border-radius: calc(var(--wg-radius, 18px) - 4px);
overflow: hidden;
background: var(--wg-surface-muted, #f7f7f8);
}
.agent-image-card button {
display: block;
border: 0;
padding: 0;
background: transparent;
width: 100%;
cursor: pointer;
}
.agent-image-card img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}
.agent-image-card figcaption {
display: flex;
justify-content: flex-end;
padding: 8px;
}
@media (max-width: 700px) {
.agent-action-results { width: 100%; }
.agent-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Wizard AI 2026-06-02: real mobile full-width viewport fix */
:root{
--wizard-vh:1vh;
--wizard-prompt-height:132px;
}
.chat-page .modern-chat.compact-chat-ui,
.chat-page .modern-chat.compact-chat-ui *{
min-width:0;
}
.chat-page .message,
.chat-page .message-card,
.chat-page .message-body,
.chat-page .agent-action-card,
.chat-page .agent-action-results,
.chat-page .code-card{
max-width:100%;
min-width:0;
}
.chat-page .message-body pre,
.chat-page .message-body code,
.chat-page .code-card pre,
.chat-page .code-card code{
max-width:100%;
}
.chat-page .code-card{
width:100%;
overflow:hidden;
}
.chat-page .code-card pre{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;
}
@media (max-width:900px){
html,
body{
width:100%!important;
max-width:100%!important;
height:100%!important;
overflow:hidden!important;
overscroll-behavior:none!important;
}
body.chat-page{
position:fixed!important;
inset:0!important;
width:100vw!important;
max-width:100vw!important;
height:calc(var(--wizard-vh,1vh) * 100)!important;
overflow:hidden!important;
background:var(--wg-bg)!important;
}
.chat-page .app-shell.modern-chat.compact-chat-ui{
display:block!important;
grid-template-columns:1fr!important;
width:100vw!important;
max-width:100vw!important;
height:calc(var(--wizard-vh,1vh) * 100)!important;
min-height:0!important;
padding:0!important;
margin:0!important;
gap:0!important;
overflow:hidden!important;
background:transparent!important;
}
.chat-page .modern-chat.compact-chat-ui .workspace,
.chat-page .modern-chat.compact-chat-ui .chat-panel,
.chat-page .modern-chat.compact-chat-ui .panel.active-panel.chat-panel{
display:block!important;
width:100vw!important;
max-width:100vw!important;
height:calc(var(--wizard-vh,1vh) * 100)!important;
min-height:0!important;
padding:0!important;
margin:0!important;
overflow:hidden!important;
background:transparent!important;
}
.chat-page .modern-chat.compact-chat-ui .panel.active-panel:not(.chat-panel){
width:100vw!important;
max-width:100vw!important;
height:calc(var(--wizard-vh,1vh) * 100)!important;
min-height:0!important;
padding:calc(58px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom))!important;
overflow:auto!important;
-webkit-overflow-scrolling:touch;
}
.chat-page .modern-chat.compact-chat-ui .sidebar{
position:fixed!important;
z-index:65!important;
left:0!important;
top:0!important;
bottom:auto!important;
width:min(86vw,330px)!important;
max-width:86vw!important;
height:calc(var(--wizard-vh,1vh) * 100)!important;
min-height:0!important;
max-height:none!important;
transform:translateX(-105%)!important;
transition:transform .22s ease!important;
overflow-y:auto!important;
overflow-x:hidden!important;
-webkit-overflow-scrolling:touch;
border-radius:0 22px 22px 0!important;
padding:calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom))!important;
box-shadow:18px 0 70px rgba(15,23,42,.16)!important;
}
body.sidebar-open .chat-page .modern-chat.compact-chat-ui .sidebar,
body.sidebar-open .modern-chat.compact-chat-ui .sidebar{
transform:translateX(0)!important;
}
.chat-page .mobile-sidebar-toggle{
display:grid!important;
place-items:center!important;
position:fixed!important;
left:12px!important;
top:calc(12px + env(safe-area-inset-top))!important;
z-index:72!important;
width:44px!important;
height:44px!important;
border-radius:999px!important;
}
.chat-page .mobile-sidebar-backdrop{
z-index:60!important;
}
.chat-page .modern-chat .chat-floating-actions,
.chat-page .modern-chat .topbar.chat-floating-actions{
position:fixed!important;
top:calc(12px + env(safe-area-inset-top))!important;
right:12px!important;
z-index:52!important;
}
.chat-page .modern-chat.compact-chat-ui .messages,
.chat-page .modern-chat .messages,
.chat-page .compact-chat-ui .messages{
width:100vw!important;
max-width:100vw!important;
height:calc(var(--wizard-vh,1vh) * 100)!important;
padding:calc(66px + env(safe-area-inset-top)) 12px calc(var(--wizard-prompt-height,132px) + 28px + env(safe-area-inset-bottom))!important;
margin:0!important;
overflow-y:auto!important;
overflow-x:hidden!important;
-webkit-overflow-scrolling:touch;
scroll-padding-bottom:calc(var(--wizard-prompt-height,132px) + 34px)!important;
overscroll-behavior:contain!important;
}
.chat-page .modern-chat .message{
width:100%!important;
max-width:100%!important;
min-width:0!important;
padding:12px 0!important;
margin:0!important;
gap:9px!important;
overflow:visible!important;
}
.chat-page .modern-chat .message .avatar{
width:28px!important;
height:28px!important;
flex:0 0 28px!important;
}
.chat-page .modern-chat .message:not(.user) .message-card{
width:calc(100% - 37px)!important;
max-width:calc(100% - 37px)!important;
min-width:0!important;
}
.chat-page .modern-chat .message.user .message-card{
max-width:min(86vw,520px)!important;
min-width:0!important;
}
.chat-page .modern-chat .message-card{
overflow:visible!important;
padding:12px 13px!important;
border-radius:18px!important;
}
.chat-page .modern-chat .message-body{
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow-wrap:anywhere!important;
word-break:normal!important;
font-size:15.5px!important;
line-height:1.6!important;
}
.chat-page .modern-chat .message-body p,
.chat-page .modern-chat .message-body ul,
.chat-page .modern-chat .message-body ol{
max-width:100%!important;
}
.chat-page .modern-chat .code-card{
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:12px 0!important;
border-radius:14px!important;
overflow:hidden!important;
}
.chat-page .modern-chat .code-head{
padding:9px 10px!important;
gap:8px!important;
}
.chat-page .modern-chat .copy-code{
flex:0 0 auto!important;
padding:7px 9px!important;
font-size:13px!important;
}
.chat-page .modern-chat .code-card pre{
display:block!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
padding:13px!important;
margin:0!important;
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch;
white-space:pre!important;
font-size:13px!important;
line-height:1.48!important;
}
.chat-page .modern-chat .code-card code{
display:inline-block!important;
min-width:max-content!important;
max-width:none!important;
white-space:pre!important;
}
.chat-page .modern-chat.compact-chat-ui .prompt-bar,
.chat-page .modern-chat .prompt-bar,
.chat-page .compact-chat-ui .prompt-bar{
position:fixed!important;
left:12px!important;
right:12px!important;
bottom:max(8px,env(safe-area-inset-bottom))!important;
width:calc(100vw - 24px)!important;
max-width:calc(100vw - 24px)!important;
min-width:0!important;
transform:none!important;
display:grid!important;
grid-template-columns:50px minmax(0,1fr) 54px!important;
gap:8px!important;
align-items:end!important;
padding:10px!important;
border-radius:26px!important;
z-index:50!important;
overflow:visible!important;
}
.chat-page .modern-chat .prompt-bar select{
position:absolute!important;
width:1px!important;
height:1px!important;
min-width:1px!important;
min-height:1px!important;
opacity:0!important;
pointer-events:none!important;
padding:0!important;
margin:0!important;
}
.chat-page .modern-chat .attachment-picker,
.chat-page .modern-chat .prompt-wrap,
.chat-page .modern-chat .send-btn{
min-width:0!important;
}
.chat-page .modern-chat .attachment-plus,
.chat-page .modern-chat .send-btn{
width:50px!important;
height:50px!important;
min-height:50px!important;
border-radius:18px!important;
padding:0!important;
}
.chat-page .modern-chat .send-btn{
border-radius:999px!important;
font-size:0!important;
}
.chat-page .modern-chat .send-btn .ui-icon{
width:21px!important;
height:21px!important;
margin:0!important;
}
.chat-page .modern-chat .prompt-wrap textarea{
width:100%!important;
min-height:50px!important;
max-height:132px!important;
padding:12px 4px!important;
border:0!important;
background:transparent!important;
resize:none!important;
font-size:16px!important;
line-height:1.45!important;
overflow-y:auto!important;
}
.chat-page .modern-chat .prompt-wrap textarea:focus{
box-shadow:none!important;
}
.chat-page .modern-chat .prompt-wrap small{
display:none!important;
}
.chat-page .modern-chat .attachment-preview{
max-height:74px!important;
overflow:auto!important;
margin-bottom:6px!important;
}
.chat-page .attachment-menu{
position:fixed!important;
left:12px!important;
right:12px!important;
bottom:calc(var(--wizard-prompt-height,132px) + 18px + env(safe-area-inset-bottom))!important;
width:auto!important;
max-width:calc(100vw - 24px)!important;
z-index:80!important;
}
.chat-page .agent-action-results,
.chat-page .agent-action-card{
width:100%!important;
max-width:100%!important;
}
.chat-page .agent-image-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
@media (max-width:480px){
.chat-page .modern-chat.compact-chat-ui .messages,
.chat-page .modern-chat .messages,
.chat-page .compact-chat-ui .messages{
padding-left:10px!important;
padding-right:10px!important;
}
.chat-page .modern-chat .message:not(.user) .avatar{
display:none!important;
}
.chat-page .modern-chat .message:not(.user) .message-card{
width:100%!important;
max-width:100%!important;
}
.chat-page .modern-chat .message-card{
padding:10px 10px!important;
}
.chat-page .modern-chat .code-card{
border-radius:12px!important;
}
.chat-page .modern-chat .code-card pre{
font-size:12.5px!important;
padding:12px!important;
}
.chat-page .modern-chat.compact-chat-ui .prompt-bar,
.chat-page .modern-chat .prompt-bar,
.chat-page .compact-chat-ui .prompt-bar{
left:10px!important;
right:10px!important;
width:calc(100vw - 20px)!important;
max-width:calc(100vw - 20px)!important;
grid-template-columns:48px minmax(0,1fr) 52px!important;
gap:7px!important;
padding:9px!important;
}
.chat-page .modern-chat .attachment-plus{
width:48px!important;
height:48px!important;
min-height:48px!important;
}
.chat-page .modern-chat .send-btn{
width:52px!important;
height:52px!important;
min-height:52px!important;
}
}
/* Wizard AI 2026-06-02: mobile links + scroll stabilization v3
Fixes previous aggressive body-fixed mobile rules that could block taps and nested scrolling. */
@media (max-width: 900px){
html{
width:100%!important;
max-width:100%!important;
height:100%!important;
overflow:hidden!important;
overscroll-behavior:none!important;
}
body.chat-page{
position:static!important;
inset:auto!important;
width:100%!important;
max-width:100%!important;
height:100dvh!important;
min-height:100dvh!important;
overflow:hidden!important;
touch-action:auto!important;
-webkit-overflow-scrolling:auto!important;
background:var(--wg-bg)!important;
}
.chat-page .app-shell.modern-chat.compact-chat-ui{
position:fixed!important;
inset:0!important;
display:block!important;
width:100%!important;
max-width:100%!important;
height:100dvh!important;
min-height:0!important;
overflow:hidden!important;
transform:none!important;
touch-action:auto!important;
background:transparent!important;
}
.chat-page .modern-chat.compact-chat-ui .workspace,
.chat-page .modern-chat.compact-chat-ui .chat-panel,
.chat-page .modern-chat.compact-chat-ui .panel.active-panel.chat-panel{
position:absolute!important;
inset:0!important;
display:block!important;
width:100%!important;
max-width:100%!important;
height:auto!important;
min-height:0!important;
overflow:hidden!important;
transform:none!important;
background:transparent!important;
}
.chat-page .modern-chat.compact-chat-ui .panel:not(.active-panel){
display:none!important;
}
.chat-page .modern-chat.compact-chat-ui .panel.active-panel:not(.chat-panel){
position:absolute!important;
inset:0!important;
width:100%!important;
max-width:100%!important;
height:auto!important;
min-height:0!important;
padding:calc(64px + env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom))!important;
overflow-y:auto!important;
overflow-x:hidden!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior:contain!important;
touch-action:pan-y!important;
}
.chat-page .modern-chat.compact-chat-ui .messages,
.chat-page .modern-chat .messages,
.chat-page .compact-chat-ui .messages{
position:absolute!important;
inset:0!important;
width:100%!important;
max-width:100%!important;
height:auto!important;
min-height:0!important;
padding:calc(70px + env(safe-area-inset-top)) 12px calc(var(--wizard-prompt-height,128px) + 34px + env(safe-area-inset-bottom))!important;
margin:0!important;
overflow-y:auto!important;
overflow-x:hidden!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-y:contain!important;
touch-action:pan-y!important;
scroll-padding-top:calc(70px + env(safe-area-inset-top))!important;
scroll-padding-bottom:calc(var(--wizard-prompt-height,128px) + 40px + env(safe-area-inset-bottom))!important;
pointer-events:auto!important;
}
.chat-page .modern-chat .messages a,
.chat-page .modern-chat .messages button,
.chat-page .modern-chat .messages summary,
.chat-page .modern-chat .messages input,
.chat-page .modern-chat .messages select,
.chat-page .modern-chat .messages textarea,
.chat-page .agent-action-card a,
.chat-page .attachment-chip,
.chat-page .mini-btn,
.chat-page .btn{
pointer-events:auto!important;
touch-action:manipulation!important;
}
.chat-page .modern-chat .code-card{
width:100%!important;
max-width:100%!important;
overflow:hidden!important;
}
.chat-page .modern-chat .code-card pre{
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-x:contain!important;
touch-action:pan-x!important;
}
.chat-page .modern-chat .chat-floating-actions,
.chat-page .modern-chat .topbar.chat-floating-actions{
position:fixed!important;
top:calc(12px + env(safe-area-inset-top))!important;
right:12px!important;
z-index:75!important;
pointer-events:none!important;
}
.chat-page .modern-chat .chat-floating-actions > *,
.chat-page .modern-chat .topbar.chat-floating-actions > *{
pointer-events:auto!important;
touch-action:manipulation!important;
}
.chat-page .mobile-sidebar-toggle{
position:fixed!important;
left:12px!important;
top:calc(12px + env(safe-area-inset-top))!important;
z-index:86!important;
pointer-events:auto!important;
touch-action:manipulation!important;
}
.chat-page .mobile-sidebar-backdrop{
position:fixed!important;
inset:0!important;
z-index:78!important;
opacity:0!important;
pointer-events:none!important;
}
body.sidebar-open .chat-page .mobile-sidebar-backdrop,
body.sidebar-open .mobile-sidebar-backdrop{
opacity:1!important;
pointer-events:auto!important;
}
.chat-page .modern-chat.compact-chat-ui .sidebar{
position:fixed!important;
left:0!important;
top:0!important;
bottom:auto!important;
z-index:82!important;
height:100dvh!important;
max-height:100dvh!important;
width:min(86vw,330px)!important;
max-width:86vw!important;
overflow-y:auto!important;
overflow-x:hidden!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior:contain!important;
touch-action:pan-y!important;
transform:translate3d(-105%,0,0)!important;
will-change:transform!important;
}
body.sidebar-open .chat-page .modern-chat.compact-chat-ui .sidebar,
body.sidebar-open .modern-chat.compact-chat-ui .sidebar{
transform:translate3d(0,0,0)!important;
}
.chat-page .modern-chat.compact-chat-ui .prompt-bar,
.chat-page .modern-chat .prompt-bar,
.chat-page .compact-chat-ui .prompt-bar{
position:fixed!important;
left:12px!important;
right:12px!important;
bottom:max(8px,env(safe-area-inset-bottom))!important;
width:auto!important;
max-width:calc(100vw - 24px)!important;
min-width:0!important;
z-index:76!important;
pointer-events:auto!important;
touch-action:auto!important;
contain:layout style!important;
}
.chat-page .modern-chat .prompt-wrap,
.chat-page .modern-chat .prompt-wrap textarea{
pointer-events:auto!important;
touch-action:auto!important;
}
.chat-page .attachment-menu{
z-index:90!important;
pointer-events:auto!important;
}
.chat-page .attachment-menu button{
pointer-events:auto!important;
touch-action:manipulation!important;
}
.modal:not(.hidden){
z-index:100!important;
}
}
@media (max-width:480px){
.chat-page .modern-chat.compact-chat-ui .messages,
.chat-page .modern-chat .messages,
.chat-page .compact-chat-ui .messages{
padding-left:10px!important;
padding-right:10px!important;
}
.chat-page .modern-chat.compact-chat-ui .prompt-bar,
.chat-page .modern-chat .prompt-bar,
.chat-page .compact-chat-ui .prompt-bar{
left:10px!important;
right:10px!important;
max-width:calc(100vw - 20px)!important;
}
}
/* Wizard AI 2026-06-02: compact clean mobile prompt v4
Makes the bottom mobile composer smaller, clearer and easier to scroll around. */
@media (max-width: 700px){
:root{
--wizard-prompt-height: 82px;
}
.chat-page .modern-chat.compact-chat-ui .messages,
.chat-page .modern-chat .messages,
.chat-page .compact-chat-ui .messages{
padding-bottom:calc(var(--wizard-prompt-height,82px) + 22px + env(safe-area-inset-bottom))!important;
scroll-padding-bottom:calc(var(--wizard-prompt-height,82px) + 28px + env(safe-area-inset-bottom))!important;
}
.chat-page .modern-chat.compact-chat-ui .prompt-bar,
.chat-page .modern-chat .prompt-bar,
.chat-page .compact-chat-ui .prompt-bar{
left:10px!important;
right:10px!important;
bottom:max(7px,env(safe-area-inset-bottom))!important;
max-width:calc(100vw - 20px)!important;
min-height:58px!important;
max-height:128px!important;
padding:7px!important;
display:grid!important;
grid-template-columns:34px minmax(0,1fr) 46px!important;
grid-template-rows:auto!important;
align-items:center!important;
gap:8px!important;
border-radius:26px!important;
overflow:visible!important;
background:color-mix(in srgb,var(--wg-surface) 88%,transparent)!important;
border:1px solid color-mix(in srgb,var(--wg-border) 72%,transparent)!important;
box-shadow:0 10px 32px rgba(15,23,42,.10), 0 0 0 1px rgba(255,255,255,.38) inset!important;
backdrop-filter:blur(18px)!important;
-webkit-backdrop-filter:blur(18px)!important;
contain:none!important;
}
.chat-page .modern-chat .prompt-bar select,
.chat-page .compact-chat-ui .prompt-bar select{
display:none!important;
}
.chat-page .modern-chat .attachment-picker,
.chat-page .compact-chat-ui .attachment-picker{
width:34px!important;
height:34px!important;
align-self:center!important;
justify-self:center!important;
}
.chat-page .modern-chat .attachment-plus,
.chat-page .compact-chat-ui .attachment-plus,
.chat-page .prompt-bar .attachment-plus{
width:34px!important;
height:34px!important;
min-width:34px!important;
min-height:34px!important;
border-radius:15px!important;
padding:0!important;
background:color-mix(in srgb,var(--wg-surface-muted) 76%,var(--wg-surface))!important;
border:1px solid color-mix(in srgb,var(--wg-border) 82%,transparent)!important;
color:var(--wg-text)!important;
box-shadow:none!important;
}
.chat-page .modern-chat .attachment-plus .ui-icon,
.chat-page .compact-chat-ui .attachment-plus .ui-icon,
.chat-page .prompt-bar .attachment-plus .ui-icon{
width:18px!important;
height:18px!important;
}
.chat-page .modern-chat .prompt-wrap,
.chat-page .compact-chat-ui .prompt-wrap{
min-width:0!important;
align-self:center!important;
display:block!important;
}
.chat-page .modern-chat .prompt-wrap textarea,
.chat-page .compact-chat-ui .prompt-wrap textarea{
width:100%!important;
min-height:36px!important;
height:36px;
max-height:92px!important;
padding:7px 2px!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
font-size:16px!important;
line-height:1.35!important;
color:var(--wg-text)!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch!important;
}
.chat-page .modern-chat .prompt-wrap textarea:focus,
.chat-page .compact-chat-ui .prompt-wrap textarea:focus{
border:0!important;
box-shadow:none!important;
outline:none!important;
}
.chat-page .modern-chat .prompt-wrap textarea::placeholder,
.chat-page .compact-chat-ui .prompt-wrap textarea::placeholder{
color:color-mix(in srgb,var(--wg-muted) 86%,transparent)!important;
}
.chat-page .modern-chat .prompt-wrap small,
.chat-page .compact-chat-ui .prompt-wrap small{
display:none!important;
}
.chat-page .modern-chat .send-btn,
.chat-page .compact-chat-ui .send-btn,
.chat-page .prompt-bar .send-btn{
width:46px!important;
height:46px!important;
min-width:46px!important;
min-height:46px!important;
border-radius:999px!important;
padding:0!important;
font-size:0!important;
align-self:center!important;
justify-self:end!important;
box-shadow:0 10px 26px color-mix(in srgb,var(--wg-primary) 24%,transparent)!important;
}
.chat-page .modern-chat .send-btn .ui-icon,
.chat-page .compact-chat-ui .send-btn .ui-icon,
.chat-page .prompt-bar .send-btn .ui-icon{
width:20px!important;
height:20px!important;
margin:0!important;
}
.chat-page .attachment-preview{
position:absolute!important;
left:8px!important;
right:8px!important;
bottom:calc(100% + 8px)!important;
max-height:72px!important;
overflow:auto!important;
display:flex!important;
gap:6px!important;
padding:7px!important;
border-radius:18px!important;
background:color-mix(in srgb,var(--wg-surface) 94%,transparent)!important;
border:1px solid var(--wg-border)!important;
box-shadow:0 8px 28px rgba(15,23,42,.10)!important;
}
.chat-page .attachment-preview[hidden]{
display:none!important;
}
.chat-page .attachment-preview-chip{
max-width:190px!important;
padding:6px 8px!important;
border-radius:12px!important;
white-space:nowrap!important;
}
.chat-page .attachment-menu{
left:10px!important;
right:10px!important;
bottom:calc(var(--wizard-prompt-height,82px) + 18px + env(safe-area-inset-bottom))!important;
border-radius:20px!important;
}
.chat-page .hero-empty{
padding-left:18px!important;
padding-right:18px!important;
}
}
@media (max-width: 380px){
.chat-page .modern-chat.compact-chat-ui .prompt-bar,
.chat-page .modern-chat .prompt-bar,
.chat-page .compact-chat-ui .prompt-bar{
grid-template-columns:32px minmax(0,1fr) 44px!important;
gap:6px!important;
}
.chat-page .modern-chat .attachment-plus,
.chat-page .compact-chat-ui .attachment-plus,
.chat-page .prompt-bar .attachment-plus{
width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;
}
.chat-page .modern-chat .send-btn,
.chat-page .compact-chat-ui .send-btn,
.chat-page .prompt-bar .send-btn{
width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
}
}
/* Wizard AI 2026-06-02: automatic image size, visible work state, user memory */
.wizard-thinking {
display: inline-flex;
align-items: flex-start;
gap: .75rem;
padding: .85rem 1rem;
border: 1px solid color-mix(in srgb, var(--wg-border, #e5e7eb) 72%, transparent);
border-radius: 18px;
background: color-mix(in srgb, var(--wg-surface, #fff) 82%, transparent);
box-shadow: 0 16px 36px rgba(15, 23, 42, .06);
max-width: min(100%, 560px);
}
.wizard-thinking strong { display:block; font-weight: 650; color: var(--wg-text, #111827); }
.wizard-thinking small { display:block; color: var(--wg-muted, #6b7280); line-height: 1.35; margin-top: .15rem; }
.thinking-dot {
width: .65rem;
height: .65rem;
margin-top: .35rem;
border-radius: 999px;
background: linear-gradient(135deg, var(--wg-primary, #a855f7), var(--wg-accent, #38bdf8));
box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--wg-primary, #a855f7) 16%, transparent);
animation: wizardThinkingPulse 1.25s infinite ease-in-out;
}
@keyframes wizardThinkingPulse { 0%,100%{ transform:scale(.92); opacity:.72 } 50%{ transform:scale(1.16); opacity:1 } }
.agent-action-card.memory {
border-color: color-mix(in srgb, var(--wg-primary, #a855f7) 28%, var(--wg-border, #e5e7eb));
background: linear-gradient(135deg, color-mix(in srgb, var(--wg-primary, #a855f7) 8%, #fff), color-mix(in srgb, var(--wg-accent, #38bdf8) 8%, #fff));
}
.memory-modal-card { max-width: 720px; }
.memory-add-form { display:grid; grid-template-columns: 1fr auto; gap:.75rem; margin: 1rem 0; }
.memory-add-form input { min-height: 48px; border-radius: 16px; border: 1px solid var(--wg-border, #e5e7eb); padding: 0 1rem; background: var(--wg-surface, #fff); color: var(--wg-text, #111827); }
.memory-list { display:grid; gap:.65rem; max-height: min(50vh, 520px); overflow:auto; padding-right:.25rem; }
.memory-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem .95rem; border:1px solid var(--wg-border, #e5e7eb); border-radius:18px; background: color-mix(in srgb, var(--wg-surface, #fff) 92%, transparent); }
.memory-row strong { display:block; font-weight: 520; line-height:1.35; }
.memory-row small { display:block; color:var(--wg-muted,#6b7280); margin-top:.2rem; }
.side-memory-btn { justify-content:flex-start; }
@media (max-width: 700px) {
.wizard-thinking { padding:.7rem .8rem; border-radius:16px; }
.wizard-thinking small { display:none; }
.memory-add-form { grid-template-columns: 1fr; }
.memory-modal-card { width: calc(100vw - 22px); max-height: calc(100dvh - 40px); }
.memory-list { max-height: 46dvh; }
}
/* 2026-06-02 hidden memory + profile + admin icon fix */
.admin-nav-link .nav-icon{
width:24px!important;
height:24px!important;
min-width:24px!important;
display:grid!important;
place-items:center!important;
border-radius:10px!important;
background:color-mix(in srgb,var(--wg-primary) 12%,transparent)!important;
color:var(--wg-primary)!important;
overflow:hidden!important;
}
.admin-nav-link .nav-svg{
width:17px!important;
height:17px!important;
display:block!important;
stroke:currentColor!important;
fill:none!important;
}
.admin-nav-link.active .nav-icon,
.admin-nav-link:hover .nav-icon{
background:color-mix(in srgb,var(--wg-primary) 18%,transparent)!important;
color:var(--wg-primary)!important;
}
.side-memory-btn,
.memory-modal-card,
.memory-row,
.memory-add-form{
display:none!important;
}
.sidebar-tools-menu .sidebar-menu-panel{padding:8px!important;}
.compact-tool-tabs .side-tab{min-height:40px!important;font-weight:520!important;}
@media(max-width:760px){
.admin-nav-link .nav-icon{width:22px!important;height:22px!important;min-width:22px!important;}
.admin-nav-link .nav-svg{width:16px!important;height:16px!important;}
}
/* Wizard AI 2026-06-02: animated welcome + mobile composer like the reference, with wizard styling */
.hero-empty.wizard-animated-hero{
display:grid!important;
place-items:center!important;
gap:10px!important;
max-width:min(720px,92vw)!important;
margin:auto!important;
padding:clamp(70px,18vh,170px) 20px 120px!important;
color:var(--wg-muted)!important;
}
.wizard-animated-hero .hero-kicker{
margin:2px 0 0!important;
font-size:13px!important;
font-weight:650!important;
letter-spacing:.12em!important;
text-transform:uppercase!important;
color:color-mix(in srgb,var(--wg-primary) 70%,var(--wg-muted))!important;
}
.wizard-animated-hero h2{
margin:0!important;
color:var(--wg-text)!important;
font-size:clamp(42px,7vw,76px)!important;
line-height:.98!important;
letter-spacing:-.065em!important;
font-weight:760!important;
text-wrap:balance!important;
background:linear-gradient(110deg,var(--wg-text) 10%,color-mix(in srgb,var(--wg-primary) 72%,var(--wg-text)) 45%,color-mix(in srgb,var(--wg-accent) 72%,var(--wg-text)) 70%,var(--wg-text) 92%)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
color:transparent!important;
background-size:220% 100%!important;
animation:wizardTitleShimmer 7s ease-in-out infinite!important;
}
.hero-rotating-lines{
position:relative!important;
min-height:36px!important;
width:min(560px,92vw)!important;
margin-top:2px!important;
color:var(--wg-muted)!important;
font-size:clamp(17px,3.6vw,24px)!important;
line-height:1.25!important;
font-weight:430!important;
text-wrap:balance!important;
}
.hero-rotating-lines span{
position:absolute!important;
inset:0!important;
display:grid!important;
place-items:center!important;
opacity:0!important;
transform:translateY(8px)!important;
animation:wizardHeroLine 12s ease-in-out infinite!important;
}
.hero-rotating-lines span:nth-child(2){animation-delay:4s!important;}
.hero-rotating-lines span:nth-child(3){animation-delay:8s!important;}
.wizard-hero-orb{
width:84px!important;
height:84px!important;
border-radius:999px!important;
padding:0!important;
background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--wg-primary) 24%,#fff) 0 30%,transparent 62%),transparent!important;
box-shadow:none!important;
animation:wizardOrbFloat 4.8s ease-in-out infinite!important;
}
.wizard-hero-orb .hero-logo{
width:78px!important;
height:78px!important;
object-fit:contain!important;
filter:drop-shadow(0 18px 20px color-mix(in srgb,var(--wg-primary) 28%,transparent))!important;
}
.wizard-hero-orb::before,.wizard-hero-orb::after{
content:"✦"!important;
position:absolute!important;
color:color-mix(in srgb,var(--wg-primary) 72%,#facc15)!important;
filter:drop-shadow(0 0 10px currentColor)!important;
opacity:.85!important;
animation:wizardSpark 2.8s ease-in-out infinite!important;
}
.wizard-hero-orb::before{transform:translate(-42px,-30px);font-size:18px!important;}
.wizard-hero-orb::after{transform:translate(44px,22px);font-size:14px!important;animation-delay:1.1s!important;}
@keyframes wizardTitleShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes wizardHeroLine{0%,24%,100%{opacity:0;transform:translateY(10px)}8%,20%{opacity:1;transform:translateY(0)}}
@keyframes wizardOrbFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
@keyframes wizardSpark{0%,100%{opacity:.25;scale:.72;rotate:0deg}50%{opacity:1;scale:1.12;rotate:18deg}}
.wizard-thinking-pill{
position:fixed!important;
top:calc(14px + env(safe-area-inset-top))!important;
left:50%!important;
transform:translateX(-50%) translateY(-8px)!important;
z-index:62!important;
display:flex!important;
align-items:center!important;
gap:8px!important;
min-height:42px!important;
padding:7px 14px 7px 8px!important;
border-radius:999px!important;
background:color-mix(in srgb,var(--wg-surface) 90%,transparent)!important;
border:1px solid color-mix(in srgb,var(--wg-border) 70%,transparent)!important;
box-shadow:0 18px 50px rgba(15,23,42,.13)!important;
backdrop-filter:blur(18px)!important;
color:color-mix(in srgb,var(--wg-primary) 72%,var(--wg-text))!important;
font-weight:700!important;
opacity:0!important;
pointer-events:none!important;
transition:opacity .2s ease, transform .2s ease!important;
}
.wizard-thinking-pill.is-active:not([hidden]){opacity:1!important;transform:translateX(-50%) translateY(0)!important;}
.wizard-thinking-orb{
width:28px!important;height:28px!important;border-radius:999px!important;
display:grid!important;place-items:center!important;
background:linear-gradient(135deg,color-mix(in srgb,var(--wg-primary) 18%,#fff),color-mix(in srgb,var(--wg-accent) 18%,#fff))!important;
animation:wizardThinkingSpin 1.6s linear infinite!important;
}
.wizard-thinking-orb img{width:25px!important;height:25px!important;object-fit:contain!important;}
@keyframes wizardThinkingSpin{to{rotate:360deg}}
@media(max-width:760px){
.chat-page .hero-empty.wizard-animated-hero{
min-height:calc(100dvh - var(--wizard-prompt-height,92px) - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
padding:calc(102px + env(safe-area-inset-top)) 24px calc(var(--wizard-prompt-height,92px) + 34px)!important;
justify-content:center!important;
}
.chat-page .wizard-animated-hero h2{
font-size:clamp(36px,10.5vw,54px)!important;
max-width:92vw!important;
}
.chat-page .hero-rotating-lines{
font-size:clamp(17px,4.7vw,22px)!important;
width:min(330px,88vw)!important;
min-height:58px!important;
}
.chat-page .wizard-hero-orb{width:76px!important;height:76px!important;}
.chat-page .wizard-hero-orb .hero-logo{width:72px!important;height:72px!important;}
.chat-page .modern-chat.compact-chat-ui .prompt-bar,
.chat-page .modern-chat .prompt-bar,
.chat-page .compact-chat-ui .prompt-bar{
position:fixed!important;
left:24px!important;
right:24px!important;
bottom:max(16px,env(safe-area-inset-bottom))!important;
transform:none!important;
width:auto!important;
max-width:none!important;
min-height:64px!important;
display:grid!important;
grid-template-columns:46px minmax(0,1fr)!important;
align-items:end!important;
gap:10px!important;
padding:0!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
backdrop-filter:none!important;
z-index:40!important;
}
.chat-page .prompt-bar::before{content:none!important;}
.chat-page .prompt-bar .attachment-picker{
grid-column:1!important;
align-self:end!important;
width:46px!important;
height:54px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.chat-page .prompt-bar .attachment-plus,
.chat-page .modern-chat .attachment-plus,
.chat-page .compact-chat-ui .attachment-plus{
width:46px!important;
height:46px!important;
min-width:46px!important;
min-height:46px!important;
border-radius:999px!important;
padding:0!important;
background:color-mix(in srgb,var(--wg-surface) 92%,transparent)!important;
border:1px solid color-mix(in srgb,var(--wg-border) 74%,transparent)!important;
color:var(--wg-text)!important;
box-shadow:0 12px 32px rgba(15,23,42,.10)!important;
backdrop-filter:blur(16px)!important;
}
.chat-page .prompt-bar .attachment-plus .ui-icon,
.chat-page .modern-chat .attachment-plus .ui-icon{
width:20px!important;height:20px!important;
}
.chat-page .modern-chat .prompt-bar select,
.chat-page .compact-chat-ui .prompt-bar select{
display:none!important;
}
.chat-page .modern-chat .prompt-wrap,
.chat-page .compact-chat-ui .prompt-wrap,
.chat-page .prompt-wrap{
grid-column:2!important;
position:relative!important;
min-width:0!important;
min-height:64px!important;
max-height:148px!important;
display:flex!important;
align-items:center!important;
padding:10px 64px 10px 18px!important;
border-radius:28px!important;
background:color-mix(in srgb,var(--wg-surface) 94%,transparent)!important;
border:1px solid color-mix(in srgb,var(--wg-border) 70%,transparent)!important;
box-shadow:0 16px 48px rgba(15,23,42,.13),0 0 26px color-mix(in srgb,var(--wg-primary) 10%,transparent)!important;
backdrop-filter:blur(22px)!important;
overflow:visible!important;
}
.chat-page .modern-chat .prompt-wrap textarea,
.chat-page .compact-chat-ui .prompt-wrap textarea,
.chat-page .prompt-wrap textarea{
width:100%!important;
min-height:36px!important;
height:36px;
max-height:104px!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
color:var(--wg-text)!important;
font-size:18px!important;
line-height:1.34!important;
font-weight:400!important;
overflow-y:auto!important;
resize:none!important;
-webkit-overflow-scrolling:touch!important;
}
.chat-page .prompt-wrap textarea::placeholder{
color:color-mix(in srgb,var(--wg-muted) 82%,transparent)!important;
}
.chat-page .prompt-wrap small{display:none!important;}
.chat-page .modern-chat .send-btn,
.chat-page .compact-chat-ui .send-btn,
.chat-page .prompt-bar .send-btn{
position:absolute!important;
right:8px!important;
bottom:8px!important;
width:48px!important;
height:48px!important;
min-width:48px!important;
min-height:48px!important;
border-radius:999px!important;
padding:0!important;
font-size:0!important;
border:0!important;
background:linear-gradient(135deg,var(--wg-primary),var(--wg-accent))!important;
color:#fff!important;
box-shadow:0 12px 30px color-mix(in srgb,var(--wg-primary) 32%,transparent)!important;
}
.chat-page .send-btn:disabled{opacity:.68!important;filter:saturate(.85)!important;}
.chat-page .send-btn .ui-icon{width:21px!important;height:21px!important;}
.chat-page .attachment-preview{
left:0!important;
right:0!important;
bottom:calc(100% + 10px)!important;
border-radius:20px!important;
max-height:76px!important;
}
.chat-page .attachment-menu{
bottom:calc(var(--wizard-prompt-height,92px) + 22px + env(safe-area-inset-bottom))!important;
border-radius:22px!important;
}
.chat-page .messages{
padding-bottom:calc(var(--wizard-prompt-height,92px) + 36px)!important;
}
}
@media(max-width:380px){
.chat-page .modern-chat.compact-chat-ui .prompt-bar,
.chat-page .modern-chat .prompt-bar,
.chat-page .compact-chat-ui .prompt-bar{
left:16px!important;right:16px!important;grid-template-columns:42px minmax(0,1fr)!important;gap:8px!important;
}
.chat-page .prompt-bar .attachment-plus,
.chat-page .prompt-bar .attachment-picker{width:42px!important;min-width:42px!important;}
.chat-page .prompt-bar .attachment-plus{height:42px!important;min-height:42px!important;}
.chat-page .prompt-wrap{min-height:60px!important;border-radius:26px!important;padding-right:58px!important;padding-left:16px!important;}
.chat-page .prompt-bar .send-btn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;}
.chat-page .prompt-wrap textarea{font-size:17px!important;}
}
/* Wizard AI 2026-06-02: mobile plus alignment fix v1
Keeps the small + button on the same baseline as the prompt pill. */
@media (max-width: 760px){
.chat-page .modern-chat.compact-chat-ui .prompt-bar,
.chat-page .modern-chat .prompt-bar,
.chat-page .compact-chat-ui .prompt-bar{
display:block!important;
position:fixed!important;
left:24px!important;
right:24px!important;
bottom:max(18px,env(safe-area-inset-bottom))!important;
height:64px!important;
min-height:64px!important;
max-height:64px!important;
width:auto!important;
max-width:none!important;
padding:0!important;
margin:0!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
backdrop-filter:none!important;
overflow:visible!important;
transform:none!important;
z-index:40!important;
}
.chat-page .modern-chat .prompt-bar .attachment-picker,
.chat-page .compact-chat-ui .prompt-bar .attachment-picker,
.chat-page .prompt-bar .attachment-picker{
position:absolute!important;
left:0!important;
bottom:8px!important;
top:auto!important;
width:48px!important;
height:48px!important;
min-width:48px!important;
min-height:48px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
margin:0!important;
transform:none!important;
z-index:3!important;
}
.chat-page .modern-chat .prompt-bar .attachment-plus,
.chat-page .compact-chat-ui .prompt-bar .attachment-plus,
.chat-page .prompt-bar .attachment-plus{
width:44px!important;
height:44px!important;
min-width:44px!important;
min-height:44px!important;
border-radius:999px!important;
display:grid!important;
place-items:center!important;
padding:0!important;
margin:0!important;
background:color-mix(in srgb,var(--wg-surface) 94%,transparent)!important;
border:1px solid color-mix(in srgb,var(--wg-border) 74%,transparent)!important;
color:var(--wg-text)!important;
box-shadow:0 12px 34px rgba(15,23,42,.11)!important;
backdrop-filter:blur(18px)!important;
-webkit-backdrop-filter:blur(18px)!important;
}
.chat-page .prompt-bar .attachment-plus .ui-icon{
width:19px!important;
height:19px!important;
}
.chat-page .modern-chat .prompt-wrap,
.chat-page .compact-chat-ui .prompt-wrap,
.chat-page .prompt-wrap{
position:absolute!important;
left:64px!important;
right:0!important;
bottom:0!important;
top:auto!important;
grid-column:auto!important;
min-height:64px!important;
max-height:132px!important;
width:auto!important;
display:flex!important;
align-items:center!important;
padding:10px 64px 10px 18px!important;
border-radius:30px!important;
background:color-mix(in srgb,var(--wg-surface) 94%,transparent)!important;
border:1px solid color-mix(in srgb,var(--wg-border) 70%,transparent)!important;
box-shadow:0 16px 48px rgba(15,23,42,.13),0 0 26px color-mix(in srgb,var(--wg-primary) 10%,transparent)!important;
backdrop-filter:blur(22px)!important;
-webkit-backdrop-filter:blur(22px)!important;
overflow:visible!important;
}
.chat-page .modern-chat .prompt-wrap textarea,
.chat-page .compact-chat-ui .prompt-wrap textarea,
.chat-page .prompt-wrap textarea{
min-height:36px!important;
height:36px;
max-height:96px!important;
padding:0!important;
margin:0!important;
line-height:1.34!important;
overflow-y:auto!important;
}
.chat-page .modern-chat .send-btn,
.chat-page .compact-chat-ui .send-btn,
.chat-page .prompt-bar .send-btn{
position:absolute!important;
right:8px!important;
bottom:8px!important;
top:auto!important;
width:48px!important;
height:48px!important;
min-width:48px!important;
min-height:48px!important;
border-radius:999px!important;
z-index:4!important;
}
.chat-page .attachment-menu{
left:0!important;
right:auto!important;
width:min(280px,calc(100vw - 48px))!important;
bottom:72px!important;
}
.chat-page .attachment-preview{
left:64px!important;
right:0!important;
bottom:74px!important;
max-height:76px!important;
}
.chat-page .messages{
padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;
scroll-padding-bottom:calc(104px + env(safe-area-inset-bottom))!important;
}
}
@media (max-width: 380px){
.chat-page .modern-chat.compact-chat-ui .prompt-bar,
.chat-page .modern-chat .prompt-bar,
.chat-page .compact-chat-ui .prompt-bar{
left:18px!important;
right:18px!important;
height:60px!important;
min-height:60px!important;
max-height:60px!important;
}
.chat-page .prompt-bar .attachment-picker{width:44px!important;height:44px!important;bottom:8px!important;}
.chat-page .prompt-bar .attachment-plus{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;}
.chat-page .prompt-wrap{left:56px!important;min-height:60px!important;border-radius:28px!important;padding-left:16px!important;padding-right:58px!important;}
.chat-page .prompt-bar .send-btn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;}
.chat-page .attachment-preview{left:56px!important;}
}
/* Wizard AI profile modal */
.user-profile-modal {
width: min(720px, calc(100vw - 28px));
}
.profile-fields input,
.profile-fields select,
.profile-notes-field textarea {
width: 100%;
}
.profile-notes-field {
display: grid;
gap: 8px;
margin-top: 16px;
color: var(--wg-muted);
font-size: 14px;
}
.profile-notes-field textarea {
resize: vertical;
min-height: 92px;
border: 1px solid var(--wg-border);
border-radius: 18px;
padding: 13px 15px;
color: var(--wg-text);
background: var(--wg-surface);
font: inherit;
}
.profile-location-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 16px;
padding: 12px;
border: 1px solid var(--wg-border);
border-radius: 20px;
background: color-mix(in srgb, var(--wg-surface-muted) 70%, transparent);
}
.profile-location-actions .muted {
font-size: 13px;
}
.profile-consent-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
color: var(--wg-muted);
font-size: 14px;
}
.profile-consent-row input {
width: 18px;
height: 18px;
}
@media (max-width: 700px) {
.user-profile-modal {
width: calc(100vw - 20px);
max-height: calc(100dvh - 38px);
overflow: auto;
}
.profile-location-actions .btn {
width: 100%;
justify-content: center;
}
}
/* Markdown image/link rendering fix */
.chat-inline-image-link{display:block;width:fit-content;max-width:100%;margin:14px 0;text-decoration:none;color:inherit}
.chat-inline-image{display:block;max-width:min(100%,760px);max-height:520px;width:auto;height:auto;border-radius:20px;border:1px solid color-mix(in srgb,var(--wg-border) 72%,transparent);box-shadow:0 16px 50px rgba(15,23,42,.10);object-fit:contain;background:color-mix(in srgb,var(--wg-surface) 86%,transparent)}
.message.user .chat-inline-image-link{margin-left:auto}
.chat-inline-link{color:var(--wg-primary);text-decoration:underline;text-underline-offset:3px;font-weight:600;word-break:break-word}
@media(max-width:760px){.chat-inline-image-link{margin:12px 0}.chat-inline-image{max-width:100%;max-height:58vh;border-radius:18px}.message:not(.user) .chat-inline-image-link{width:100%}}
/* Wizard AI day/night mode + language selector */
.sidebar-preference-form{
display:grid;
gap:10px;
margin-top:10px;
padding:12px;
border:1px solid color-mix(in srgb,var(--wg-border) 72%,transparent);
border-radius:18px;
background:color-mix(in srgb,var(--wg-surface) 78%,transparent);
}
.sidebar-preference-form label{display:grid;gap:6px;font-size:12px;color:var(--wg-muted)}
.sidebar-preference-form select{
width:100%;border:1px solid var(--wg-border);border-radius:13px;padding:10px 12px;
background:var(--wg-surface);color:var(--wg-text);font:inherit;font-size:14px;
}
@media (prefers-color-scheme: dark){
body.appearance-system{
--wg-bg:#090b12;--wg-surface:#111522;--wg-surface-muted:#171c2b;--wg-text:#f4f7fb;--wg-muted:#aab3c5;--wg-border:#273043;--wg-sidebar:#0c101a;--wg-sidebar-text:#f4f7fb;--wg-assistant-bubble:#111522;--wg-assistant-text:#f4f7fb;--wg-user-bubble:#252a3a;--wg-user-text:#f8fafc;
background-color:var(--wg-bg)!important;color:var(--wg-text)!important;
}
}
body.appearance-dark{
--wg-bg:#090b12;--wg-surface:#111522;--wg-surface-muted:#171c2b;--wg-text:#f4f7fb;--wg-muted:#aab3c5;--wg-border:#273043;--wg-sidebar:#0c101a;--wg-sidebar-text:#f4f7fb;--wg-assistant-bubble:#111522;--wg-assistant-text:#f4f7fb;--wg-user-bubble:#252a3a;--wg-user-text:#f8fafc;
background-color:var(--wg-bg)!important;color:var(--wg-text)!important;
}
body.appearance-dark .glass-panel,
body.appearance-dark .modal-card,
body.appearance-dark .prompt-wrap,
body.appearance-dark .sidebar-menu-panel,
body.appearance-dark .card{
background:color-mix(in srgb,var(--wg-surface) 88%,transparent)!important;
border-color:color-mix(in srgb,var(--wg-border) 80%,transparent)!important;
}
body.appearance-dark .message.user .message-card{background:var(--wg-user-bubble);color:var(--wg-user-text)}
body.appearance-dark .message.assistant .message-card{color:var(--wg-assistant-text)}
body.appearance-dark input,body.appearance-dark select,body.appearance-dark textarea{background:#0d111c;color:var(--wg-text);border-color:var(--wg-border)}
body.appearance-dark .conversation-link.active,body.appearance-dark .side-tab.active{background:color-mix(in srgb,var(--wg-primary) 20%,var(--wg-surface))!important}
body.appearance-dark .chat-inline-image{background:#0d111c;border-color:var(--wg-border)}
body.appearance-light{color-scheme:light}
body.appearance-dark{color-scheme:dark}
html[dir="rtl"] .sidebar{border-left:1px solid var(--wg-border);border-right:0}
html[dir="rtl"] .message.user{margin-left:0;margin-right:auto}
html[dir="rtl"] .conversation-delete-btn{left:8px;right:auto}
/* Wizard AI 2026-06-02: scroll, redirect support, tables and stat charts */
@media (max-width: 900px){
html{
overflow-x:hidden!important;
overflow-y:auto!important;
height:100%!important;
}
body:not(.chat-page){
position:relative!important;
width:100%!important;
min-height:100dvh!important;
height:auto!important;
overflow-x:hidden!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-y:auto!important;
}
body.chat-page{
overflow:hidden!important;
}
.landing-shell,
.billing-shell,
.admin-shell{
min-height:100dvh!important;
overflow:visible!important;
}
.admin-main,
.landing-main,
.billing-main{
overflow:visible!important;
}
.modal-card{
max-height:calc(100dvh - 24px)!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch!important;
}
.chat-page .modern-chat.compact-chat-ui .messages,
.chat-page .modern-chat .messages,
.chat-page .compact-chat-ui .messages{
overscroll-behavior-y:contain!important;
-webkit-overflow-scrolling:touch!important;
touch-action:pan-y!important;
padding-bottom:calc(var(--wizard-prompt-height,92px) + 46px + env(safe-area-inset-bottom))!important;
}
.chat-page .modern-chat.compact-chat-ui .prompt-bar,
.chat-page .modern-chat .prompt-bar,
.chat-page .compact-chat-ui .prompt-bar{
touch-action:auto!important;
}
}
.chat-table-wrap{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
margin:14px 0;
border:1px solid color-mix(in srgb,var(--wg-border) 82%,transparent);
border-radius:16px;
background:color-mix(in srgb,var(--wg-surface) 92%,transparent);
}
.chat-data-table{
width:100%;
min-width:520px;
border-collapse:separate;
border-spacing:0;
font-size:14px;
line-height:1.45;
}
.chat-data-table th,
.chat-data-table td{
padding:11px 12px;
border-bottom:1px solid color-mix(in srgb,var(--wg-border) 72%,transparent);
vertical-align:top;
}
.chat-data-table th{
position:sticky;
top:0;
z-index:1;
color:var(--wg-text);
background:color-mix(in srgb,var(--wg-surface-muted) 76%,var(--wg-surface));
font-weight:650;
}
.chat-data-table tr:last-child td{border-bottom:0}
.chat-data-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--wg-surface-muted) 34%,transparent)}
.chat-data-table code{white-space:nowrap}
.chat-stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:10px;
margin:14px 0;
}
.chat-stat-card{
border:1px solid color-mix(in srgb,var(--wg-border) 80%,transparent);
border-radius:18px;
background:linear-gradient(135deg,color-mix(in srgb,var(--wg-surface) 94%,transparent),color-mix(in srgb,var(--wg-primary) 5%,var(--wg-surface)));
padding:13px 14px;
display:grid;
gap:5px;
box-shadow:0 12px 28px rgba(15,23,42,.05);
}
.chat-stat-card span:first-child{font-size:12px;color:var(--wg-muted);font-weight:560}
.chat-stat-card strong{font-size:clamp(21px,4vw,30px);line-height:1.05;color:var(--wg-text);font-weight:720;letter-spacing:-.035em}
.chat-stat-delta{justify-self:start;border-radius:999px;background:color-mix(in srgb,var(--wg-primary) 12%,transparent);color:color-mix(in srgb,var(--wg-primary) 78%,var(--wg-text));padding:3px 8px;font-size:12px;font-weight:650}
.chat-stat-card small{color:var(--wg-muted);font-size:12px}
.chat-chart-card{
border:1px solid color-mix(in srgb,var(--wg-border) 80%,transparent);
border-radius:20px;
padding:15px;
margin:14px 0;
background:color-mix(in srgb,var(--wg-surface) 94%,transparent);
box-shadow:0 14px 34px rgba(15,23,42,.06);
}
.chat-chart-title{display:block;margin:0 0 12px;font-size:15px;font-weight:680;color:var(--wg-text)}
.chat-bars{display:grid;gap:10px}
.chat-bar-row{display:grid;grid-template-columns:minmax(78px,130px) minmax(90px,1fr) auto;gap:10px;align-items:center;font-size:13px}
.chat-bar-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--wg-muted)}
.chat-bar-track{height:12px;border-radius:999px;background:color-mix(in srgb,var(--wg-surface-muted) 74%,transparent);overflow:hidden}
.chat-bar-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--wg-primary),var(--wg-accent));min-width:4px}
.chat-bar-row strong{font-size:12px;font-weight:700;color:var(--wg-text);white-space:nowrap}
.chat-chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chat-line-chart{display:block;min-width:520px;width:100%;height:auto}
.chat-line-chart polyline{fill:none;stroke:var(--wg-primary);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.chat-line-chart circle{fill:var(--wg-surface);stroke:var(--wg-accent);stroke-width:3}
.chat-line-chart text{font-size:12px;fill:var(--wg-muted)}
.chat-donut-list{display:grid;gap:8px}
.chat-donut-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:14px;background:color-mix(in srgb,var(--wg-surface-muted) 46%,transparent)}
.chat-donut-row span{color:var(--wg-muted)}
.chat-donut-row strong{font-size:13px;color:var(--wg-text)}
@media (max-width:700px){
.chat-table-wrap{border-radius:14px;margin:12px 0}
.chat-data-table{min-width:460px;font-size:13px}
.chat-data-table th,.chat-data-table td{padding:9px 10px}
.chat-stats-grid{grid-template-columns:1fr 1fr;gap:8px}
.chat-stat-card{border-radius:16px;padding:11px 12px}
.chat-bar-row{grid-template-columns:84px 1fr;gap:7px 9px}
.chat-bar-row strong{grid-column:2;justify-self:end;margin-top:-4px}
.chat-line-chart{min-width:460px}
}
/* Wizard Guru: artifact structure tree + build order in chat action cards */
.wizard-file-tree,
.wizard-file-details{
margin-top:10px;
border:1px solid color-mix(in srgb,var(--wg-border,#dcdce4) 72%,transparent);
border-radius:14px;
background:color-mix(in srgb,var(--wg-surface-muted,#f7f7f8) 78%,transparent);
overflow:hidden;
}
.wizard-file-tree > summary,
.wizard-file-details > summary{
display:flex;
align-items:center;
gap:8px;
padding:10px 12px;
font-size:.92rem;
font-weight:600;
color:var(--wg-text,#111827);
cursor:pointer;
list-style:none;
}
.wizard-file-tree > summary::-webkit-details-marker,
.wizard-file-details > summary::-webkit-details-marker{display:none;}
.wizard-file-tree pre{
margin:0;
padding:12px;
max-height:320px;
overflow:auto;
border-top:1px solid color-mix(in srgb,var(--wg-border,#dcdce4) 72%,transparent);
font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
white-space:pre;
color:var(--wg-text,#111827);
background:color-mix(in srgb,var(--wg-surface,#fff) 78%,transparent);
}
.wizard-file-table-wrap{
overflow:auto;
border-top:1px solid color-mix(in srgb,var(--wg-border,#dcdce4) 72%,transparent);
}
.wizard-file-table{
width:100%;
min-width:720px;
border-collapse:collapse;
font-size:.85rem;
}
.wizard-file-table th,
.wizard-file-table td{
padding:9px 10px;
border-bottom:1px solid color-mix(in srgb,var(--wg-border,#dcdce4) 60%,transparent);
text-align:left;
vertical-align:top;
}
.wizard-file-table th{
font-weight:650;
color:var(--wg-muted,#6b7280);
background:color-mix(in srgb,var(--wg-surface,#fff) 75%,transparent);
}
.wizard-file-table td:first-child,
.wizard-file-table th:first-child,
.wizard-file-table td:last-child,
.wizard-file-table th:last-child{
width:1%;
white-space:nowrap;
}
.wizard-file-table code{
white-space:nowrap;
}
@media (max-width: 640px){
.wizard-file-tree pre{font-size:11.5px;max-height:260px;}
.wizard-file-table{min-width:640px;font-size:.8rem;}
.wizard-file-table th,.wizard-file-table td{padding:8px;}
}
/* Wizard Guru: AI-vastausten pienet toimintopainikkeet */
.message-actions {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
opacity: .72;
transition: opacity .18s ease;
}
.message.assistant:hover .message-actions,
.message-actions:focus-within { opacity: 1; }
.message-action {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 30px;
padding: 5px 9px;
border: 1px solid color-mix(in srgb, var(--wg-border, #e5e7eb) 88%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--wg-surface, #fff) 88%, transparent);
color: var(--wg-muted, #667085);
font: inherit;
font-size: 12px;
cursor: pointer;
box-shadow: 0 8px 26px rgba(15, 23, 42, .05);
}
.message-action:hover,
.message-action:focus-visible {
color: var(--wg-primary, #10a37f);
border-color: color-mix(in srgb, var(--wg-primary, #10a37f) 34%, var(--wg-border, #e5e7eb));
outline: none;
}
.message-action.is-done { color: var(--wg-primary, #10a37f); }
.message-action .ui-icon { width: 15px; height: 15px; }
@media (max-width: 700px) {
.message-actions { gap: 4px; margin-top: 8px; }
.message-action { width: 32px; height: 32px; padding: 0; justify-content: center; }
.message-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Wizard Guru: julkiset lakisivut ja admin-editorit */
.public-shell {
min-height: 100dvh;
padding: 22px;
background: radial-gradient(circle at 20% 0%, rgba(193, 72, 255, .10), transparent 28%), var(--wg-bg, #f7f7f8);
color: var(--wg-text, #111827);
}
.public-topbar {
max-width: 1120px;
margin: 0 auto 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.public-nav {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.public-nav a:not(.btn) {
color: var(--wg-muted, #667085);
text-decoration: none;
padding: 10px 12px;
border-radius: 999px;
}
.public-nav a:not(.btn):hover { color: var(--wg-text, #111827); background: rgba(255,255,255,.7); }
.legal-card {
max-width: 880px;
margin: 0 auto;
padding: clamp(24px, 4vw, 54px);
border-radius: 32px;
}
.legal-content h1 {
font-size: clamp(34px, 6vw, 58px);
line-height: 1.02;
letter-spacing: -0.04em;
margin: 0 0 28px;
}
.legal-content h2 {
margin: 32px 0 10px;
font-size: 1.35rem;
letter-spacing: -0.02em;
}
.legal-content p, .legal-content li {
font-size: 1.04rem;
line-height: 1.72;
color: var(--wg-text, #111827);
}
.legal-content ul { padding-left: 1.2rem; }
.legal-updated { margin-top: 34px; }
.legal-editor-form textarea[name="privacy_content"],
.legal-editor-form textarea[name="terms_content"] {
min-height: 320px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
line-height: 1.55;
}
.admin-form textarea[name="extra_head"] {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
@media (max-width: 760px) {
.public-shell { padding: 16px; }
.public-topbar { align-items: flex-start; flex-direction: column; }
.public-nav { width: 100%; }
.public-nav .btn { flex: 1 1 auto; }
.legal-card { padding: 24px; border-radius: 24px; }
}