/* MohChat workspace surfaces: sidebar navigation, toolbar entry, context chips and the hub dialog.
 * Uses the existing surface tokens, so light themes, the black surface mode and RTL follow the app. */
.mwh-icon{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;color:inherit}
.mwh-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mwh-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Buttons */
.mwh-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 14px;border:1px solid var(--border,#444);border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:13.5px;font-weight:500;line-height:1.3;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.mwh-button:hover{background:var(--bg-tertiary,#2b2b2b)}
.mwh-button:disabled{opacity:.55;cursor:wait}
a.mwh-button{text-decoration:none}
.mwh-button:focus-visible,.mwh-dialog input:focus-visible,.mwh-dialog select:focus-visible,.mwh-dialog textarea:focus-visible{outline:2px solid var(--text-primary,#ddd);outline-offset:3px}
.mwh-primary{background:var(--text-primary,#eee);color:var(--bg-primary,#111);border-color:var(--text-primary,#eee);font-weight:600}
.mwh-primary:hover{background:var(--text-secondary,#ccc);border-color:var(--text-secondary,#ccc)}
.mwh-danger{color:#f09a92}
.mwh-danger:hover{background:#f0665522;border-color:#f0665566}
.mwh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block:12px}

/* Sidebar navigation: same metrics as the recent-chat rows (36px, 14px, 10px radius). */
.mwh-navigation{display:flex;flex-direction:column;gap:2px;flex:none;padding:8px 12px 6px;max-height:min(46dvh,400px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.mwh-nav-item,.mwh-nav-project{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:36px;padding:7px 10px;border:0;border-radius:10px;background:transparent;color:var(--text-primary,#fff);font:inherit;font-size:14px;font-weight:500;line-height:1.3;text-align:start;cursor:pointer;transition:background .16s ease,color .16s ease}
.mwh-nav-item:hover,.mwh-nav-project:hover{background:rgba(255,255,255,.05)}
.mwh-nav-item .mwh-icon{color:var(--text-secondary,#b5b5b5)}
.mwh-nav-item:hover .mwh-icon{color:inherit}
.mwh-nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mwh-nav-project{font-weight:400;color:var(--text-secondary,#b5b5b5);padding-inline-start:14px}
.mwh-nav-project:hover{color:var(--text-primary,#fff)}
.mwh-project-dot{width:8px;height:8px;margin-inline:6px;border-radius:50%;background:var(--text-secondary,#aaa);flex:none}
/* Portfolio and Tools rows sit in the same list, so they share the row metrics. */
#sidebarFull>.portfolio-launch{box-sizing:border-box;width:calc(100% - 24px);min-height:36px;margin:0 12px;padding:7px 10px;gap:10px;border-radius:10px;font-size:14px;font-weight:500;line-height:1.3;transition:background .16s ease}
#sidebarFull>.portfolio-launch:hover{background:rgba(255,255,255,.05)}
#sidebarFull>.portfolio-launch svg{width:20px;height:20px;flex:none;color:var(--text-secondary,#b5b5b5)}
#sidebarFull>.portfolio-launch:hover svg{color:inherit}
#mohTools{padding:0 12px 8px;margin-bottom:0}
#mohTools .moh-tool-row{min-height:36px;padding:7px 10px;gap:10px;font-weight:500;line-height:1.3;transition:background .16s ease}
#mohTools .moh-tool-row:hover{background:rgba(255,255,255,.05)}
#mohTools .moh-tool-row svg{width:20px;height:20px;flex:none;color:var(--text-secondary,#b5b5b5)}
#mohTools .moh-tool-row:hover svg{color:inherit}
.profile-menu-item.mwh-menu-item .mwh-icon{width:16px;height:16px}
.profile-menu-item.mwh-menu-item .mwh-icon svg{width:16px;height:16px;stroke-width:2}

/* Toolbar entry */
#main>.toolbar{grid-template-columns:44px minmax(0,1fr) auto 44px}
#main>.toolbar>.workspace-new-chat{grid-column:4}
#main>.toolbar>.mwh-toolbar-button{grid-column:3;grid-row:1;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 13px 6px 10px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--text-secondary,#bbb);font-size:13px;font-weight:600;white-space:nowrap}
#main>.toolbar>.mwh-toolbar-button:hover{background:var(--bg-secondary,#222);border-color:var(--border,#333);color:var(--text-primary,#fff)}
#main>.toolbar>.mwh-toolbar-button .mwh-icon{width:18px;height:18px}
#main>.toolbar>.mwh-toolbar-button .mwh-icon svg{width:17px;height:17px}

/* Conversation context: project, assistant and temporary chips under the toolbar. */
.mwh-context{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;flex:none;padding:2px 16px 10px;font-size:13px;color:var(--text-secondary,#aaa)}
.mwh-context[hidden]{display:none!important}
#main.images-active>.mwh-context{display:none}
.mwh-chip{display:inline-flex;align-items:center;gap:7px;max-width:240px;min-height:30px;padding:4px 12px 4px 9px;border:1px solid var(--border,#3a3a3a);border-radius:999px;background:var(--bg-secondary,#1d1d1d);color:var(--text-primary,#eee);font-size:12.5px;font-weight:500;line-height:1.3}
.mwh-chip>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mwh-chip .mwh-icon{width:16px;height:16px;color:var(--text-secondary,#bbb)}
.mwh-chip .mwh-icon svg{width:15px;height:15px}
.mwh-chip .mwh-project-dot{margin-inline:2px 1px}
.mwh-chip-temporary{border-style:dashed}
.mwh-context .mwh-note{margin:0;font-size:12.5px}
.mwh-quiet{min-height:30px;padding:4px 11px;border:0;border-radius:999px;background:transparent;color:var(--text-secondary,#bbb);font-size:12.5px;font-weight:500;text-decoration:none}
.mwh-quiet:hover{background:var(--bg-secondary,#222);color:var(--text-primary,#fff)}

/* Dialog. The page resets every margin, so centering and the mobile sheet are explicit here. */
.mwh-dialog{--mwh-muted:var(--text-secondary,#b0b0b0);--mwh-surface:var(--bg-secondary,#1c1c1c);--mwh-raised:var(--bg-tertiary,#2a2a2a);--mwh-line:var(--border,#363636);position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(860px,calc(100vw - 40px));height:fit-content;max-height:min(calc(100dvh - 48px),860px);padding:0;color:var(--text-primary,#f5f5f5);background:var(--bg-primary,#101010);border:1px solid var(--mwh-line);border-radius:22px;box-shadow:0 30px 110px #000a;overflow:hidden}
.mwh-dialog[open]{display:flex;flex-direction:column}
.mwh-dialog::backdrop{background:#0009;backdrop-filter:blur(6px)}
.mwh-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding:18px 18px 16px 24px;border-bottom:1px solid var(--mwh-line)}
.mwh-header h2{margin:0;font-size:20px;font-weight:650;line-height:1.3;letter-spacing:-.3px;overflow-wrap:anywhere}
.mwh-close{position:relative;width:38px;height:38px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mwh-muted);display:grid;place-items:center;flex:none}
.mwh-close:hover{background:var(--mwh-raised);color:var(--text-primary,#fff)}
.mwh-body{flex:1;min-height:90px;padding:20px 24px 24px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.mwh-body h3{margin:0 0 6px;font-size:15px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.mwh-body>h3{margin-top:28px}
.mwh-status{flex:none;margin:0;padding:10px 24px;border-top:1px solid var(--mwh-line);font-size:13px;color:var(--mwh-muted);overflow-wrap:anywhere}
.mwh-status:empty{display:none}
.mwh-status[role=alert]{color:#f09a92}
.mwh-note{margin:0 0 14px;font-size:13px;line-height:1.6;color:var(--mwh-muted);overflow-wrap:anywhere;white-space:pre-wrap}
.mwh-back{align-self:flex-start;min-height:32px;margin:-6px 0 12px;margin-inline-start:-8px;padding:4px 10px 4px 8px;border:0;border-radius:999px;color:var(--mwh-muted);font-size:13px}
.mwh-back:hover{color:var(--text-primary,#fff)}
.mwh-back::before{content:'←';margin-inline-end:7px}
html[dir=rtl] .mwh-back::before{content:'→'}

/* Feature cards: icon tile, label, one-line description. */
.mwh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 8px}
.mwh-feature{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;min-height:0;padding:16px;border-color:transparent;border-radius:16px;background:var(--mwh-surface);text-align:start;font-size:14px;font-weight:600;line-height:1.3}
.mwh-feature:hover{background:var(--mwh-raised);border-color:var(--mwh-line)}
.mwh-feature .mwh-icon{order:-1;width:34px;height:34px;border-radius:10px;background:var(--mwh-raised);color:var(--text-primary,#eee);transition:background .15s}
.mwh-feature:hover .mwh-icon{background:var(--bg-primary,#101010)}
.mwh-feature>span:last-child{display:block;font-size:12.5px;font-weight:400;line-height:1.5;color:var(--mwh-muted)}
.mwh-feature-wide{flex-direction:row;align-items:center;gap:12px;padding:12px 14px}
.mwh-feature-wide .mwh-icon{width:30px;height:30px}
.mwh-feature-wide>span:last-child{flex:1 1 100%}

/* Rows */
.mwh-list{display:flex;flex-direction:column;margin-top:14px}
.mwh-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--mwh-line)}
.mwh-row:last-child{border-bottom:0}
.mwh-row-main{display:block;flex:1 1 240px;min-width:0;min-height:0;padding:0;border:0;border-radius:8px;background:transparent;color:inherit;font-weight:400;text-align:start;overflow-wrap:anywhere}
.mwh-row-main:hover{background:transparent}
button.mwh-row-main:hover strong{text-decoration:underline;text-underline-offset:3px}
.mwh-row-main strong,.mwh-row-main h3{display:flex;align-items:center;gap:8px;margin:0;font-size:14.5px;font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.mwh-row-main small{display:block;margin-top:4px;font-size:12.5px;color:var(--mwh-muted);overflow-wrap:anywhere}
.mwh-row-main .mwh-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:4px 0 0;font-size:12.5px;overflow:hidden}
.mwh-row-main .mwh-badge{margin-top:6px}
.mwh-row>.mwh-actions{margin:0;gap:6px}
.mwh-row>.mwh-actions>.mwh-button,.mwh-row>.mwh-button,.mwh-row>a.mwh-button{min-height:32px;padding:5px 11px;border-radius:8px;font-size:12.5px}
.mwh-badge{display:inline-flex;align-items:center;gap:5px;min-height:22px;padding:2px 9px;border-radius:999px;background:var(--mwh-raised);color:var(--mwh-muted);font-size:11.5px;font-weight:600;line-height:1.3;white-space:nowrap}
.mwh-badge-ok{color:#9fdcb3;background:#2d8a5533}
.mwh-badge-live{color:#a9ccff;background:#3b7fd633}
.mwh-badge-bad{color:#f6a8a0;background:#c7463733}
.mwh-empty{margin-top:16px;padding:36px 20px;border:1px dashed var(--mwh-line);border-radius:14px;text-align:center}
.mwh-empty .mwh-note{margin:0}

/* Forms */
.mwh-form{display:grid;gap:16px}
.mwh-field{display:grid;gap:7px;font-size:12.5px;font-weight:600;line-height:1.4}
.mwh-dialog input:not([type=checkbox]):not([type=color]),.mwh-dialog select,.mwh-dialog textarea{box-sizing:border-box;width:100%;min-width:0;padding:10px 12px;border:1px solid var(--mwh-line);border-radius:10px;background:var(--mwh-surface);color:var(--text-primary,#eee);font:inherit;font-size:14px;line-height:1.5}
.mwh-dialog input::placeholder,.mwh-dialog textarea::placeholder{color:var(--mwh-muted);opacity:.8}
.mwh-dialog select{appearance:none;-webkit-appearance:none;padding-inline-end:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:16px;cursor:pointer}
html[dir=rtl] .mwh-dialog select{background-position:left 11px center}
.mwh-dialog textarea{resize:vertical;min-height:96px;font-weight:400}
.mwh-dialog input[type=color]{width:56px;height:38px;padding:3px;border:1px solid var(--mwh-line);border-radius:10px;background:var(--mwh-surface);cursor:pointer}
.mwh-dialog input[type=checkbox]{width:18px;height:18px;accent-color:var(--text-primary,#ddd);cursor:pointer}
.mwh-dialog .mwh-move{width:auto;max-width:170px;min-height:32px;padding:5px 30px 5px 11px;border-radius:8px;font-size:12.5px;background-position:right 9px center;background-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[dir=rtl] .mwh-dialog .mwh-move{padding:5px 11px 5px 30px;background-position:left 9px center}
.mwh-dialog input.mwh-search{min-height:46px;padding-inline-start:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:13px center;background-size:19px}
html[dir=rtl] .mwh-dialog input.mwh-search{background-position:right 13px center}
.mwh-check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:400;cursor:pointer}
.mwh-dialog .mwh-editor{min-height:320px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7;tab-size:2;white-space:pre-wrap}
.mwh-dialog .mwh-share-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;direction:ltr}
.mwh-row>.mwh-share-url{flex-basis:100%}
.mwh-weekdays{display:flex;flex-wrap:wrap;gap:10px 16px;padding:12px 14px 14px;border:1px solid var(--mwh-line);border-radius:12px}
.mwh-weekdays legend{padding:0 6px;font-size:12.5px;font-weight:600;color:var(--mwh-muted)}
.mwh-weekdays .mwh-check{font-size:13px}
.mwh-field[hidden],.mwh-weekdays[hidden]{display:none!important}
.mwh-job-result{max-height:45dvh;margin-block:14px;padding:16px 18px;border:1px solid var(--mwh-line);border-radius:12px;background:var(--mwh-surface);font-size:14px;line-height:1.7;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.mwh-job-error{font-size:13px;color:#f09a92;white-space:pre-wrap;overflow-wrap:anywhere}

/* Message actions gained Edit in canvas; let the row wrap instead of clipping on narrow screens. */
.message-actions{flex-wrap:wrap}
.message-action-btn{white-space:nowrap}

@media(prefers-reduced-motion:no-preference){
 .mwh-dialog[open]{animation:mwh-enter .18s ease-out}
 @keyframes mwh-enter{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
}
@media(max-width:650px){
 .mwh-dialog{inset:auto 0 0;margin:0 auto;width:100%;max-width:100vw;max-height:calc(100dvh - 24px);border-bottom:0;border-radius:22px 22px 0 0}
 @media(prefers-reduced-motion:no-preference){@keyframes mwh-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}}
 .mwh-header{padding:14px 12px 12px 18px}
 .mwh-header h2{font-size:18px}
 .mwh-body{padding:16px 18px calc(22px + env(safe-area-inset-bottom,0px))}
 .mwh-status{padding:9px 18px calc(9px + env(safe-area-inset-bottom,0px))}
 .mwh-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .mwh-feature{padding:13px;border-radius:14px;font-size:13.5px}
 .mwh-feature .mwh-icon{width:30px;height:30px}
 .mwh-row{align-items:stretch;gap:8px}
 .mwh-row>.mwh-actions{width:100%}
 .mwh-dialog .mwh-move{max-width:150px}
 #main>.toolbar{grid-template-columns:36px minmax(0,1fr) auto 36px;gap:3px!important;padding-inline:9px}
 #main>.toolbar>.mwh-toolbar-button{width:40px;padding:6px;justify-content:center}
 #main>.toolbar>.mwh-toolbar-button .mwh-nav-label{display:none}
 #main>.toolbar .chat-section-tabs button{padding-inline:10px;font-size:12px}
 .mwh-context{justify-content:flex-start;flex-wrap:nowrap;padding:2px 14px 10px;overflow-x:auto;scrollbar-width:none}
 .mwh-context::-webkit-scrollbar{display:none}
 .mwh-context .mwh-chip,.mwh-context .mwh-quiet{flex:none}
 .mwh-context .mwh-note{display:none}
}
@media(max-width:370px){.mwh-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.mwh-button,.mwh-nav-item,.mwh-nav-project{transition:none}}