/* Canonical HiHiro Service project explorer (third pane).
   The only operational Service page is /. Old route is a redirect only. */
.service-shell,.service-shell.has-selection{
  direction:ltr;
  grid-template-columns:clamp(180px,16vw,215px) minmax(0,1fr) clamp(205px,18vw,245px);
}
.service-shell>.service-catalog,.service-workspace-track>.service-workbench,.service-workspace-track>.service-project-pane{min-width:0;direction:rtl}
html[dir=ltr] .service-shell>.service-catalog,
html[dir=ltr] .service-workspace-track>.service-workbench,
html[dir=ltr] .service-workspace-track>.service-project-pane{direction:ltr}
.service-project-toggle{display:none}
.service-project-pane{
  min-width:0;min-height:0;display:flex;flex-direction:column;align-self:stretch;
  border-inline-start:1px solid rgba(114,155,199,.2);
  background:linear-gradient(180deg,#0b1e33,#071626);
  color:#e4f1ff;overflow:hidden;position:relative;z-index:2
}
.service-project-header{min-height:70px;padding:14px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid rgba(150,190,230,.12)}
.service-project-header>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.service-project-header small{font-size:.57rem;letter-spacing:.13em;color:#6caefd}
.service-project-header b{font-size:.85rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service-project-header span{font-size:.65rem;color:#8da7c2}
.service-project-header button,.service-project-node>button{
  background:transparent;color:#9bb6d2;border:1px solid rgba(158,192,224,.13);
  cursor:pointer;border-radius:8px;width:30px;height:30px;flex:0 0 30px
}
.service-project-header button{display:none;align-items:center;gap:5px;min-width:44px;justify-content:center;white-space:nowrap}
.service-project-tree-heading{display:flex;align-items:center;gap:7px;padding:14px 12px 6px;color:#b4cee5;font-size:.74rem}
.service-project-tree-heading span{color:#57a6ff}
.service-project-list{flex:1 1 auto;min-height:150px;overflow-y:auto;overflow-x:hidden;padding:7px 8px 18px;scrollbar-width:thin;scrollbar-color:#26547f transparent}
.service-project-node{border-radius:11px;border:1px solid transparent;display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:center;margin-bottom:6px;background:rgba(25,57,88,.34)}
.service-project-node.is-active{border-color:#368fec;background:#132f51}
.service-project-select{min-width:0;display:flex;align-items:center;gap:8px;color:#e7f2ff;text-decoration:none;padding:10px 8px}
.service-project-select>span:first-child{color:#5eacff}
.service-project-select>span:last-child{display:flex;flex-direction:column;min-width:0;gap:5px}
.service-project-select b{font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.service-project-select small{font-size:.59rem;color:#8aa5c0}
.service-project-node>button{margin-inline:1px;background:rgba(9,24,39,.45)}
.service-project-menu{grid-column:1/-1;display:flex;flex-direction:column;gap:2px;background:#10263e;border-top:1px solid rgba(152,193,232,.13);padding:6px}
.service-project-menu>*{display:block;background:none;color:#cde5ff;text-decoration:none;text-align:start;font:inherit;font-size:.68rem;line-height:1.6;padding:9px 7px;border:0;border-radius:7px;cursor:pointer}
.service-project-menu>*:hover{background:#1b4166}
.service-project-menu>*:disabled{opacity:.45;cursor:not-allowed}
.service-project-new{margin:6px 10px 10px;border:1px dashed #3678b1;border-radius:10px;padding:11px;color:#bedcff;text-align:center;text-decoration:none;font-size:.75rem;font-weight:700}
.service-project-context{padding:13px 12px;border-top:1px solid rgba(152,193,232,.14);background:rgba(10,29,48,.74)}
.service-project-context b{font-size:.72rem}
.service-project-context p,.service-project-feedback{margin:7px 0 0;font-size:.65rem;line-height:1.75;color:#a9c1d9;overflow-wrap:anywhere}
.service-project-feedback{padding:0 12px 12px;margin:0;min-height:0}
.service-project-empty{margin:12px 5px;color:#b6cce4;font-size:.72rem;line-height:1.9}
.service-project-empty a{color:#7ac3ff}
@media(max-width:1050px) and (min-width:891px){
  .service-shell,.service-shell.has-selection{grid-template-columns:180px minmax(0,1fr) 205px}
}
@media(prefers-reduced-motion:reduce){.service-project-pane{transition:none}}

.service-project-continue-form{display:grid;gap:9px;padding:12px;border-top:1px solid rgba(152,193,232,.14)}
.service-project-continue-form[hidden]{display:none!important}
.service-project-continue-form label{font-size:.68rem;color:#bed6ed}
.service-project-continue-form textarea{min-height:78px;resize:vertical;width:100%;border:1px solid #28537b;background:#081a2c;color:#f0f7ff;border-radius:9px;padding:9px;font:inherit;font-size:.7rem;line-height:1.7}
.service-project-continue-form button{padding:10px;border:1px solid #2186df;border-radius:9px;background:#1660a4;color:#fff;font:inherit;font-size:.69rem;font-weight:800;cursor:pointer}
.service-project-continue-form button:disabled{opacity:.55;cursor:wait}


/* HIHIRO_DESKTOP_THREE_COLUMN_WORKSPACE_V1
   Keep the physical left → right order regardless of FA/AR RTL.
   Overrides the historical two-column !important grid from
   service-customer-visual.css. The three panes share one frame and
   each owns its own vertical scrolling. Mobile drawer is unaffected. */
@media (min-width:891px){
  body.service-os .service-main > #service-shell.service-shell,
  body.service-os .service-main > #service-shell.service-shell.has-selection{
    display:grid!important;
    direction:ltr!important;
    grid-template-areas:"services chat projects"!important;
    grid-template-columns:clamp(180px,16vw,225px) minmax(0,1fr) clamp(200px,18vw,255px)!important;
    grid-template-rows:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    align-items:stretch!important;
    gap:0!important;
    padding:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
    border:1px solid rgba(76,145,217,.24)!important;
    border-radius:19px!important;
  }

  body.service-os #service-shell > .service-catalog,
  body.service-os #service-shell > .service-workspace-track > .service-workbench,
  body.service-os #service-shell > .service-workspace-track > .service-project-pane{
    position:relative!important;
    inset:auto!important;
    grid-row:1!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:linear-gradient(180deg,rgba(7,27,51,.99),rgba(4,17,33,.99))!important;
    overflow:hidden!important;
    align-self:stretch!important;
  }

  body.service-os #service-shell > .service-catalog{
    grid-area:services!important;
    grid-column:1!important;
    border-right:1px solid rgba(113,160,210,.22)!important;
    direction:rtl!important;
  }
  body.service-os #service-shell > .service-workspace-track > .service-workbench{
    grid-area:chat!important;
    grid-column:2!important;
    direction:rtl!important;
  }
  body.service-os #service-shell > .service-workspace-track > .service-project-pane{
    grid-area:projects!important;
    grid-column:3!important;
    border-left:1px solid rgba(113,160,210,.22)!important;
    display:flex!important;
    flex-direction:column!important;
    direction:rtl!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  html[dir="ltr"] body.service-os #service-shell > .service-catalog,
  html[dir="ltr"] body.service-os #service-shell > .service-workspace-track > .service-workbench,
  html[dir="ltr"] body.service-os #service-shell > .service-workspace-track > .service-project-pane{
    direction:ltr!important;
  }

  body.service-os #service-shell .conversation-column{
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    max-height:100%!important;
  }
  body.service-os #service-shell .service-project-list{
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  body.service-os #service-shell > .service-workspace-track{
    display:contents!important;
  }
}


/* HIHIRO_MOBILE_HORIZONTAL_WORKSPACE_V1
   Catalog is the ONLY drawer. Chat and Project share a horizontal rail.
   Physical left-to-right order is always Chat 100% + Project 50%, including FA/AR. */
@media(max-width:890px){
  body.service-os #service-shell > .service-workspace-track{
    position:relative!important;
    z-index:1!important;
    direction:ltr!important;
    display:flex!important;
    flex-flow:row nowrap!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:pan-x pan-y;
  }
  body.service-os #service-shell > .service-workspace-track::-webkit-scrollbar{display:none}
  body.service-os #service-shell > .service-workspace-track > .service-workbench{
    position:relative!important;
    flex:0 0 100%!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    scroll-snap-align:start;
    direction:rtl!important;
  }
  body.service-os #service-shell > .service-workspace-track > .service-project-pane{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    display:flex!important;
    flex:0 0 50%!important;
    width:50%!important;
    min-width:50%!important;
    max-width:50%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-left:1px solid rgba(113,160,210,.22)!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
    scroll-snap-align:end;
    pointer-events:auto!important;
    direction:rtl!important;
    z-index:1!important;
    background:linear-gradient(180deg,rgba(7,27,51,.99),rgba(4,17,33,.99))!important;
  }
  html[dir=ltr] body.service-os #service-shell > .service-workspace-track > .service-workbench,
  html[dir=ltr] body.service-os #service-shell > .service-workspace-track > .service-project-pane{direction:ltr!important}
  body.service-os #service-shell .service-project-header button#service-project-chat{
    display:flex!important;
    padding:0 8px!important;
    height:34px!important;
    width:auto!important;
    border:1px solid rgba(155,193,230,.2)!important;
  }
  body.service-os #service-shell .service-project-list{
    flex:1 1 auto!important;
    overflow-y:auto!important;
    min-height:0!important;
    overscroll-behavior-y:contain;
  }
  body.service-os #service-shell .service-workbench .conversation-column{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.service-os #service-shell > .service-workspace-track{scroll-behavior:auto!important}
}

/* HIHIRO_CHAT_HISTORY_HORIZONTAL_GESTURE_V1
   The inner #chat-scroll remains a native vertical scrollport, but JavaScript
   handles horizontal gestures over messages and forwards them to the rail.
   Do not use touch-action:none: that would break message-history scrolling. */
@media(max-width:890px){
  body.service-os #service-shell #chat-scroll{
    touch-action:pan-y pinch-zoom!important;
    overscroll-behavior-y:contain;
  }
}


/* HIHIRO_DESKTOP_UNIFIED_PANE_HEADERS_V1
   Three adjoining panes, one understated 58px title line.
   No duplicate Hiro/chat title row, no multi-line catalog marketing copy,
   no tall WORKSPACE eyebrow above Projects. Mobile remains unchanged. */
@media(min-width:891px){
  body.service-os #service-shell{
    --hihiro-pane-header-height:58px;
    --hihiro-pane-header-border:rgba(116,159,211,.18);
    --hihiro-pane-header-fill:rgba(9,31,56,.92);
  }

  body.service-os #service-shell .service-catalog > .catalog-head,
  body.service-os #service-shell .service-project-pane > .service-project-header,
  body.service-os #service-shell #operation-service-summary.chat-workspace-status:not([hidden]){
    height:var(--hihiro-pane-header-height)!important;
    min-height:var(--hihiro-pane-header-height)!important;
    max-height:var(--hihiro-pane-header-height)!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 12px!important;
    background:var(--hihiro-pane-header-fill)!important;
    border-top:0!important;
    border-bottom:1px solid var(--hihiro-pane-header-border)!important;
    box-shadow:none!important;
    align-items:center!important;
  }

  /* Services: one icon, one title, one existing reset control. */
  body.service-os #service-shell .service-catalog > .catalog-head{
    display:flex!important;
    flex-direction:row!important;
    justify-content:space-between!important;
    gap:8px!important;
  }
  body.service-os #service-shell .catalog-head-copy{
    flex:1 1 auto!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
  }
  body.service-os #service-shell .catalog-head-copy b{
    margin:0!important;
    font-size:.81rem!important;
    line-height:1.25!important;
    font-weight:850!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.service-os #service-shell .catalog-head-copy > span,
  body.service-os #service-shell #catalog-subtitle{display:none!important}
  body.service-os #service-shell .catalog-head-icon{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    flex:0 0 30px!important;
    border-radius:9px!important;
  }
  body.service-os #service-shell .catalog-reset{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    flex:0 0 30px!important;
    border-radius:9px!important;
  }

  /* Chat: selected-service icon + name + live status IS the header.
     Remove the duplicate 'HIRO / گفتگوی پروژه' strip above it. */
  body.service-os #service-shell .service-workbench #stage-2 > .stage-head{
    display:none!important;
  }
  body.service-os #service-shell #operation-service-summary.chat-workspace-status:not([hidden]){
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr) auto!important;
    gap:8px!important;
  }
  body.service-os #service-shell #operation-service-summary .operation-service-icon{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    border-radius:9px!important;
  }
  body.service-os #service-shell #operation-service-summary .operation-service-icon svg{
    width:17px!important;height:17px!important
  }
  body.service-os #service-shell #operation-service-summary .chat-workspace-service b{
    font-size:.81rem!important;
    line-height:1.3!important;
    font-weight:850!important;
  }
  body.service-os #service-shell #operation-service-summary .chat-workspace-service small,
  body.service-os #service-shell #operation-service-summary .operation-selected-pill{
    display:none!important
  }
  body.service-os #service-shell #operation-service-summary .chat-workspace-state{
    max-width:90px!important;
    padding:5px 7px!important;
    font-size:.56rem!important;
  }

  /* Projects: folder mark + 'پروژه‌ها' + unobtrusive count. */
  body.service-os #service-shell .service-project-pane > .service-project-header{
    display:flex!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    gap:8px!important;
  }
  body.service-os #service-shell .service-project-header-mark{
    display:grid!important;
    place-items:center!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    flex:0 0 30px!important;
    border-radius:9px!important;
    background:rgba(30,100,168,.15)!important;
    border:1px solid rgba(86,157,229,.21)!important;
    color:#88c4ff!important;
  }
  body.service-os #service-shell .service-project-header-mark svg{
    width:17px!important;height:17px!important
  }
  body.service-os #service-shell .service-project-header > div{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    align-items:center!important;
    min-width:0!important;
    gap:7px!important;
  }
  body.service-os #service-shell .service-project-header b{
    font-size:.81rem!important;
    font-weight:850!important;
    line-height:1.3!important;
  }
  body.service-os #service-shell #service-project-count{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:20px!important;
    min-height:20px!important;
    padding:0 5px!important;
    margin:0!important;
    border:1px solid rgba(116,159,211,.17)!important;
    border-radius:99px!important;
    background:rgba(21,55,91,.44)!important;
    color:#a8c9e8!important;
    font-size:.62rem!important;
    font-variant-numeric:tabular-nums;
    white-space:nowrap!important;
  }
}
@media(max-width:890px){
  .service-project-header-mark{display:none!important}
}

/* A single compact customer-consent surface in the existing Project rail:
   no owner controls, no parallel wizard and no content outside the owned project. */
.service-project-quote{
  display:grid;
  gap:9px;
  margin:9px 10px 0;
  padding:13px;
  background:rgba(17,48,80,.72);
  border:1px solid rgba(109,166,225,.28);
  border-radius:13px;
  color:inherit;
  min-width:0;
}
.service-project-quote[hidden]{display:none!important}
.service-project-quote > strong{font-size:.86rem;font-weight:800}
.service-project-quote p{margin:0;line-height:1.6;overflow-wrap:anywhere}
.service-project-quote details{
  border-top:1px solid rgba(136,176,222,.20);
  padding-top:8px;font-size:.77rem;
}
.service-project-quote summary{cursor:pointer;font-weight:750;line-height:1.5}
.service-project-quote details p{white-space:pre-wrap;margin-top:8px;max-height:140px;overflow-y:auto}
.service-project-quote ul{padding-inline-start:18px;margin:8px 0;line-height:1.55}
.service-project-quote-consent{display:flex;align-items:flex-start;gap:8px;font-size:.77rem;line-height:1.5;cursor:pointer}
.service-project-quote-consent[hidden]{display:none!important}
.service-project-quote-consent input{flex:none;margin-top:4px}
.service-project-quote button{
  border:1px solid rgba(106,178,240,.35);background:#174e86;color:#fff;
  padding:10px 12px;border-radius:9px;font-weight:750;cursor:pointer;
}
.service-project-quote button:disabled{opacity:.52;cursor:not-allowed}
#service-project-quote-status{font-size:.75rem;min-height:1.3em}

.service-project-review-preview{display:grid;gap:9px;border-top:1px solid rgba(140,180,225,.25);padding-top:10px}
.service-project-review-preview[hidden]{display:none!important}
.service-project-review-preview > strong{font-size:.82rem}
#service-project-review-frame{
  display:block;width:100%;height:300px;max-height:55vh;
  border:1px solid rgba(140,180,225,.30);border-radius:10px;background:#fff;
}

/* Keep the independently verified preview and explicit delivery consent
   reachable below long contract terms inside the fixed-height project rail.
   The project list retains its separate scrolling/history behavior. */
.service-project-pane > .service-project-quote:not([hidden]){
  flex:1 1 45%;
  min-height:170px;
  max-height:65%;
  overflow-y:auto;
  overflow-x:hidden;
  align-content:start;
  scrollbar-width:thin;
  scroll-padding-block:12px;
  overscroll-behavior-y:contain;
}
#service-project-preview-open{
  background:transparent;
  border:1px solid rgba(106,178,240,.35);
  color:#c9e5ff;
  text-align:center;
}

/* Verified preview is a Chat message, never an iframe inside Projects.
   Project rail contains only a single bottom-anchored launch button. */
.service-project-pane > .service-project-preview-launch{
  flex:0 0 auto;
  align-self:stretch;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  min-height:42px;
  margin:8px 10px 12px;
  padding:10px 12px;
  border:1px solid rgba(118,190,250,.48);
  border-radius:11px;
  background:linear-gradient(110deg,#174a79,#1b669c);
  color:#fff;
  font-weight:850;
  font-size:.78rem;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(5,18,33,.2);
}
.service-project-pane > .service-project-preview-launch[hidden]{display:none!important}
.service-project-pane > .service-project-preview-launch:focus-visible{outline:3px solid #64b7ff;outline-offset:2px}
#chat-scroll > .service-project-review-preview{
  display:grid;
  gap:12px;
  flex:0 0 auto;
  min-width:0;
  width:100%;
  padding:14px;
  margin:16px 0;
  border:1px solid rgba(66,125,191,.36);
  border-radius:15px;
  background:#f0f6ff;
  color:#163253;
  overflow:hidden;
}
#chat-scroll > .service-project-review-preview[hidden]{display:none!important}
#chat-scroll > .service-project-review-preview .service-chat-preview-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}
#chat-scroll > .service-project-review-preview .service-chat-preview-heading strong{font-size:.9rem}
#chat-scroll > .service-project-review-preview .service-chat-preview-heading span{font-size:.61rem;color:#58728d;letter-spacing:.07em}
#chat-scroll #service-project-review-frame{
  width:100%;
  height:clamp(340px,54vh,720px);
  max-height:none;
  background:#fff;
}
#chat-scroll > .service-project-review-preview.is-expanded #service-project-review-frame{height:min(75vh,900px)}
#chat-scroll > .service-project-review-preview button{
  padding:10px 12px;
  min-height:38px;
  font-weight:750;
  border:1px solid #a7c8e9;
  border-radius:9px;
  background:#e1efff;
  color:#173e67;
  cursor:pointer;
}
#chat-scroll > .service-project-review-preview button:disabled{opacity:.5;cursor:not-allowed}
#chat-scroll > .service-project-review-preview .service-project-quote-consent{font-size:.8rem;color:#183853}
@media(max-width:890px){
  #chat-scroll > .service-project-review-preview{padding:10px;margin:10px 0}
  #chat-scroll #service-project-review-frame{height:clamp(310px,60vh,600px)}
}

/* Laptop compact breakpoint continuity: older visual CSS switches its
   desktop application frame at 891px, whereas the Project rail formerly
   switched at 851px. Never mix a three-pane grid with a mobile rail. */
@media(min-width:851px) and (max-width:890px){
  body.service-os .service-main > #service-shell.service-shell,
  body.service-os .service-main > #service-shell.service-shell.has-selection{
    display:grid!important;
    grid-template-columns:clamp(170px,23vw,205px) minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:0!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  body.service-os #service-shell > .service-catalog{
    grid-column:1!important;
    position:relative!important;
    min-width:0!important;
    max-width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }
  body.service-os #service-shell > .service-workspace-track{
    grid-column:2!important;
    min-width:0!important;
    width:100%!important;
    height:100%!important;
  }
}

/* Scoped chat proposals remain within the existing Chat scroll surface. */
.service-project-scope-diff{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;font:inherit;direction:ltr;text-align:start}
#service-project-versions{display:flex;flex-wrap:wrap;gap:.4rem;max-width:100%}
#service-project-versions button{max-width:100%;overflow-wrap:anywhere;cursor:pointer}

/* QA phase B: customer business flow lives within Hiro Chat, never Project rail. */
#chat-scroll > .service-project-quote,
#chat-scroll > .service-project-continue-form,
#chat-scroll > .service-project-feedback {
  flex:0 0 auto;min-width:0;width:100%;box-sizing:border-box;
}
#chat-scroll > .service-project-quote {
  margin:12px 0;max-height:none;overflow:visible;padding:16px;
  border-color:rgba(93,168,246,.50);background:rgba(16,46,79,.98);
  color:#eaf4ff;
}
#chat-scroll > .service-project-quote details {max-height:200px;overflow:auto;}
#chat-scroll > .service-project-continue-form {
  margin:12px 0;border:1px solid rgba(93,168,246,.4);
  border-radius:13px;background:rgba(17,48,80,.92);
}
#chat-scroll > .service-project-feedback {padding:5px 8px;color:#b3d5f5;}
#service-project-edit-chat {
  display:block;cursor:pointer;margin-top:9px;width:100%;padding:10px 9px;
  font:inherit;font-size:.72rem;font-weight:750;color:#e0f3ff;
  background:#174f83;border:1px solid #3e92dc;border-radius:9px;
}
#service-project-edit-chat[hidden]{display:none!important;}
@media(max-width:890px){
  #chat-scroll > .service-project-quote,#chat-scroll > .service-project-continue-form{padding:12px;}
}

/* Phase B QA: floating, keyboard-accessible Preview at top-right of Chat. */
body.service-os .conversation-column{position:relative;}
body.service-os .service-chat-preview-fab{position:absolute;top:12px;right:14px;z-index:35;pointer-events:none;}
body.service-os .service-chat-preview-fab .service-project-preview-launch{
  position:relative;inset:auto;transform:none;margin:0;pointer-events:auto;display:flex;
  justify-content:center;align-items:center;gap:8px;border-radius:999px;
  min-width:118px;min-height:42px;padding:8px 14px;
  background:linear-gradient(135deg,#3196ff,#1453bb);color:#fff;
  border:1px solid rgba(178,223,255,.65);
  box-shadow:0 8px 24px rgba(10,66,142,.36);font-size:.75rem;font-weight:850;
  cursor:pointer;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease;
}
body.service-os .service-chat-preview-fab .service-project-preview-launch[hidden]{display:none!important}
body.service-os .service-chat-preview-fab .service-project-preview-launch:hover{transform:translateY(-2px);box-shadow:0 12px 27px rgba(5,78,170,.48)}
body.service-os .service-chat-preview-fab .service-project-preview-launch:focus-visible{outline:3px solid #ffcf63;outline-offset:3px}
body.service-os .service-chat-preview-fab .service-project-preview-launch svg{flex:none}
#service-project-show-receipt{display:block;cursor:pointer;width:100%;padding:7px 8px;
  font:inherit;font-size:.68rem;border:1px solid rgba(125,184,237,.3);border-radius:9px;
  color:#d2e8fc;background:#133351;margin:7px 0 0}
#service-project-show-receipt[hidden]{display:none!important}
#chat-scroll > .service-project-feedback[hidden]{display:none!important}
@media(max-width:890px){
  body.service-os .service-chat-preview-fab{top:10px;right:8px;}
  body.service-os .service-chat-preview-fab .service-project-preview-launch{padding:7px 10px;min-height:40px;min-width:44px;font-size:.68rem;}
}
@media(prefers-reduced-motion:reduce){body.service-os .service-chat-preview-fab .service-project-preview-launch{transition:none}}


/* QA: center the selected-service title in Chat header and reserve Preview space.
   Design-only; preserves all backend/HC/consent and preview actions. */
body.service-os #service-shell #operation-service-summary.chat-workspace-status:not([hidden]){
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  gap:0!important;
  padding-inline:clamp(88px,23%,150px)!important;
  min-width:0!important;
}
/* Service icon is already present in catalog; hiding duplicate makes the heading
   itself (not the icon+heading cluster) align with the Chat's true center. */
body.service-os #service-shell #operation-service-summary .operation-service-icon{
  display:none!important;
}
body.service-os #service-shell #operation-service-summary .chat-workspace-service{
  flex:0 1 auto!important;
  order:0!important;
  min-width:0!important;
  width:auto!important;
  max-width:100%!important;
  text-align:center!important;
}
body.service-os #service-shell #operation-service-summary .chat-workspace-service b{
  display:block!important;
  text-align:center!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body.service-os #service-shell #operation-service-summary .chat-workspace-meta{
  position:absolute!important;
  left:10px!important;
  right:auto!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  max-width:clamp(44px,20%,100px)!important;
  pointer-events:none!important;
}
/* On medium viewports, use a short but still recognizable Preview label. */
@media(max-width:960px){
  body.service-os .service-chat-preview-fab .service-project-preview-launch{
    padding:7px 10px!important;
    min-width:85px!important;
    gap:4px!important;
  }
  body.service-os .service-chat-preview-fab .service-project-preview-launch span{
    font-size:0!important;
  }
  body.service-os .service-chat-preview-fab .service-project-preview-launch span::after{
    content:'Preview';font-size:.68rem;font-weight:850;
  }
}
@media(max-width:540px){
  body.service-os #service-shell #operation-service-summary.chat-workspace-status:not([hidden]){
    padding-inline:62px!important;
  }
  body.service-os #service-shell #operation-service-summary .chat-workspace-meta{
    display:none!important;
  }
  body.service-os .service-chat-preview-fab .service-project-preview-launch{
    width:40px!important;
    min-width:40px!important;
    padding:7px!important;
  }
  body.service-os .service-chat-preview-fab .service-project-preview-launch span{
    display:none!important;
  }
}


/* HIHIRO_ANDROID_DESKTOP_CHAT_IME_V1
   Android may resize only visualViewport when the keyboard opens; the
   fixed 100dvh application must instead follow the visible Chat area.
   No zoom restriction: pinch and accessibility zoom remain available. */
html.hihiro-chat-keyboard-open body.service-os{
  height:var(--hihiro-chat-available-height,100dvh)!important;
  min-height:var(--hihiro-chat-available-height,100dvh)!important;
  max-height:var(--hihiro-chat-available-height,100dvh)!important;
}
html.hihiro-chat-keyboard-open body.service-os #stage-2.conversation-panel,
html.hihiro-chat-keyboard-open body.service-os #service-shell .conversation-column{
  min-height:0!important;
}
html.hihiro-chat-keyboard-open body.service-os #chat-scroll{
  min-height:0!important;
  overflow-y:auto!important;
}
@media(pointer:coarse){
  body.service-os #stage-2 #visitor-message:focus,
  body.service-os #visitor-source-url:focus{
    /* Desktop Site shrinks layout CSS px; compensate for actual screen scale. */
    font-size:var(--hihiro-chat-focus-font,16px)!important;
    line-height:1.35!important;
    scroll-margin-bottom:12px;
  }
  body.service-os #stage-2>.agent-composer{
    flex-shrink:0!important;
    scroll-margin-bottom:env(safe-area-inset-bottom,0px);
  }
}


/* HIHIRO_QA_UX_04 — service catalog widths, scoped to the Workshop only.
   Android Chrome 'Desktop site' uses the desktop CSS viewport, thus gets the
   wider catalog; narrow mobile view gets a 55% LEFT overlay drawer.
   Chat and Project rails remain separate, individually scrolling panes. */
@media (min-width:891px){
  body.service-os .service-main > #service-shell.service-shell,
  body.service-os .service-main > #service-shell.service-shell.has-selection{
    grid-template-columns:clamp(232px,21vw,272px) minmax(0,1fr) clamp(200px,18vw,255px)!important;
  }
  body.service-os #service-shell > .service-catalog{
    max-width:none!important;
  }
  /* Long localized service names may take at most two lines, no overflow. */
  body.service-os #service-shell .service-catalog .service-option-copy b{
    display:-webkit-box!important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    white-space:normal!important;
    overflow:hidden!important;
    overflow-wrap:anywhere;
    text-overflow:ellipsis;
  }
}
@media (max-width:680px){
  body.service-os #service-shell > .service-catalog{
    width:55%!important;
    min-width:0!important;
    max-width:55%!important;
  }
  /* Fit icon + readable title + chevron inside the narrower drawer. */
  body.service-os #service-shell .service-catalog .service-option{
    grid-template-columns:30px minmax(0,1fr) 12px!important;
    gap:4px!important;
    padding-inline:5px!important;
    min-height:54px!important;
  }
  body.service-os #service-shell .service-catalog .service-option-icon{
    width:29px!important;
    min-width:29px!important;
    height:29px!important;
    min-height:29px!important;
  }
  body.service-os #service-shell .service-catalog .service-option-copy b{
    display:-webkit-box!important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    white-space:normal!important;
    overflow:hidden!important;
    overflow-wrap:anywhere;
    text-overflow:ellipsis;
    font-size:.67rem!important;
    line-height:1.27!important;
  }
  body.service-os #service-shell .service-catalog .service-option-chevron{
    width:12px!important;
    min-width:12px!important;
  }
}


/* UX batch #5 — unified customer-owned Project rail, grouped by service.
   The list owns the upper scroll area; selected project details stay in the lower pane. */
body.service-os #service-shell .service-project-filters{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;padding:8px 8px 2px;min-width:0;
}
body.service-os #service-shell .service-project-filter{
  min-width:0;display:flex;align-items:center;justify-content:space-between;gap:4px;
  padding:8px 7px;border:1px solid rgba(106,167,227,.2);border-radius:10px;
  background:rgba(24,51,79,.52);color:#bdd5ea;font:inherit;font-size:.62rem;cursor:pointer;
}
body.service-os #service-shell .service-project-filter:first-child:last-child{grid-column:1/-1}
body.service-os #service-shell .service-project-filter.is-active{
  background:linear-gradient(115deg,#173e65,#154d80);border-color:#5aaff5;color:#fff;
}
body.service-os #service-shell .service-project-filter span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.service-os #service-shell .service-project-filter b{font-size:.62rem;color:#8dd1ff}
body.service-os #service-shell .service-project-list{flex:1 1 auto!important;min-height:64px!important;padding:6px 8px 10px!important}
body.service-os #service-shell .service-project-group{display:grid;gap:5px;margin:4px 0 13px;min-width:0}
body.service-os #service-shell .service-project-group-title{
  display:flex;align-items:center;justify-content:space-between;gap:4px;margin:0 3px 2px;
  font-size:.64rem;font-weight:800;letter-spacing:.02em;color:#8fc9f8;
}
body.service-os #service-shell .service-project-group-title small{
  background:rgba(90,168,237,.16);border-radius:99px;padding:1px 7px;color:#d1e8ff;font-size:.58rem;
}
body.service-os #service-shell .service-project-node{margin-bottom:0;border-radius:12px}
body.service-os #service-shell .service-project-node.is-active{border-color:#58aff9;box-shadow:inset 3px 0 #58aff9,0 2px 12px rgba(5,17,31,.22)}
body.service-os #service-shell .service-project-select{padding:9px 7px;gap:6px;min-height:62px;align-items:center}
body.service-os #service-shell .service-project-type-icon{flex:0 0 18px;display:grid;place-items:center;font-size:.78rem}
body.service-os #service-shell .service-project-labels{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
body.service-os #service-shell .service-project-labels b{font-size:.72rem;line-height:1.35;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
body.service-os #service-shell .service-project-type{color:#6fc2ff;font-size:.58rem;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.service-os #service-shell .service-project-stage{font-size:.57rem;line-height:1.3}
body.service-os #service-shell .service-project-new{flex:0 0 auto;margin:4px 9px 8px;padding:8px 7px}
body.service-os #service-shell .service-project-context{
  flex:0 1 auto;min-height:90px;max-height:39%;overflow-y:auto;
  background:linear-gradient(180deg,rgba(19,46,75,.97),rgba(7,23,42,.99));
  border-top:1px solid rgba(104,171,238,.34);padding:12px;
}
body.service-os #service-shell #service-project-details{display:flex;flex-direction:column;gap:6px}
body.service-os #service-shell .service-project-selected-service{color:#83cafb;font-size:.61rem}
body.service-os #service-shell .service-project-selected-title{color:#fff;font-size:.79rem;line-height:1.4;overflow-wrap:anywhere}
body.service-os #service-shell .service-project-selected-state{color:#a9bfd3;font-size:.6rem}

/* UI03 — compact source-backed Hiro Coin Quote and read-only historical receipt */
.service-project-quote{gap:11px;padding:15px;border:1px solid rgba(108,172,246,.40);border-radius:17px;
 background:linear-gradient(155deg,rgba(14,46,81,.98),rgba(8,29,53,.96));box-shadow:0 10px 32px rgba(2,18,38,.18)}
.service-project-quote>.hiro-hc-quote-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
 padding:12px 7px 10px;border-radius:13px;border:1px solid rgba(233,187,91,.18);
 background:radial-gradient(circle at 50% 10%,rgba(227,180,69,.12),transparent 72%)}
.service-project-quote .hiro-hc-quote-hero img{object-fit:contain;width:47px;height:47px}
.service-project-quote .hiro-hc-quote-amount{display:flex;direction:ltr;align-items:baseline;gap:7px;color:#f4c965;font-variant-numeric:tabular-nums}
.service-project-quote .hiro-hc-quote-amount b{font-size:clamp(2rem,3vw,2.7rem);font-weight:850;line-height:1.05;letter-spacing:-.055em}
.service-project-quote .hiro-hc-quote-amount span{font-size:1rem;font-weight:850}
.service-project-quote #hiro-hc-quote-caption{font-size:.71rem;color:#bdd0e6;text-align:center}
.service-project-quote .hiro-hc-quote-facts{font-size:.75rem;text-align:center;color:#d1e4f7}
.service-project-quote #service-project-quote-action{background:linear-gradient(120deg,#176ac6,#1488f8);font-weight:850;
 border:1px solid rgba(130,195,255,.4);border-radius:12px;min-height:42px}
.service-project-quote #service-project-quote-action:focus-visible{outline:3px solid #edc56a;outline-offset:3px}
.service-project-quote details{border-top:1px solid rgba(136,176,222,.20);padding-top:9px}
.service-project-quote summary{color:#bcd7f6}
@media(max-width:680px){.service-project-quote{padding:12px}.service-project-quote .hiro-hc-quote-amount b{font-size:2.1rem}}

/* UX #7 — compact Project explorer, full project capabilities in a per-row menu.
   No selected-project footer, no separate modal or duplicate project manager. */
body.service-os #service-shell .service-project-list{min-height:80px!important;padding-bottom:18px!important;}
body.service-os #service-shell .service-project-node{grid-template-columns:minmax(0,1fr) 38px;}
body.service-os #service-shell .service-project-node>button[data-project-menu]{
  width:36px;height:38px;min-width:36px;min-height:38px;
  justify-self:center;align-self:center;background:rgba(31,64,100,.48);
  font-size:1.12rem;font-weight:750;line-height:1;
}
body.service-os #service-shell .service-project-node>button[data-project-menu]:focus-visible,
body.service-os #service-shell .service-project-menu a:focus-visible,
body.service-os #service-shell .service-project-menu button:focus-visible,
body.service-os #service-shell .service-project-menu summary:focus-visible{
  outline:2px solid #9ad7ff;outline-offset:2px;
}
body.service-os #service-shell .service-project-menu{
  grid-column:1/-1;margin:0 5px 6px;padding:8px;
  border:1px solid rgba(111,177,240,.23);border-radius:10px;
  background:linear-gradient(180deg,#142c48,#10233a);
  min-width:0;overflow-wrap:anywhere;
}
body.service-os #service-shell .service-project-menu-actions{display:grid;gap:3px;min-width:0}
body.service-os #service-shell .service-project-menu-actions>a,
body.service-os #service-shell .service-project-menu-actions>button,
body.service-os #service-shell .service-project-menu-actions>details,
body.service-os #service-shell .service-project-menu-actions>.service-project-menu-info{
  font:inherit;color:#d2eaff;font-size:.72rem;
  border:0;border-radius:8px;background:transparent;
  text-align:start;min-width:0;padding:10px 9px;line-height:1.55;
}
body.service-os #service-shell .service-project-menu-actions>a,
body.service-os #service-shell .service-project-menu-actions>button{text-decoration:none;cursor:pointer}
body.service-os #service-shell .service-project-menu-actions>a.is-primary{
  background:rgba(24,114,194,.24);color:#eff9ff;font-weight:750;
}
/* Touch devices may retain :hover after a tap. Do not highlight every menu item. */
@media(hover:hover){
  body.service-os #service-shell .service-project-menu-actions>a:hover,
  body.service-os #service-shell .service-project-menu-actions>button:hover,
  body.service-os #service-shell .service-project-menu-actions>.service-project-menu-info>.service-project-info-toggle:hover,
  body.service-os #service-shell .service-project-menu-actions>details:hover{background:rgba(60,122,183,.23)}
}
body.service-os #service-shell .service-project-menu-info>.service-project-info-toggle{
  display:flex;justify-content:space-between;align-items:center;width:100%;
  text-align:start;padding:0;background:transparent;color:inherit;border:0;
  font:inherit;cursor:pointer;min-height:26px;
}
body.service-os #service-shell .service-project-menu-info>.service-project-info-toggle[aria-expanded=true]{color:#fff}
body.service-os #service-shell .service-project-menu-info>div[hidden]{display:none!important}
body.service-os #service-shell .service-project-menu-info.is-open{
  border:1px solid rgba(124,182,235,.23);background:rgba(5,21,36,.26);
}

body.service-os #service-shell .service-project-menu-actions summary{
  cursor:pointer;list-style-position:inside;font-weight:700;line-height:1.5;
}
body.service-os #service-shell .service-project-menu-info.is-open,
body.service-os #service-shell .service-project-menu-downloads[open]{
  border:1px solid rgba(124,182,235,.23);background:rgba(5,21,36,.26);
}
body.service-os #service-shell .service-project-menu-info dl{display:grid;gap:9px;margin:10px 0 4px}
body.service-os #service-shell .service-project-menu-info dl>div{display:grid;grid-template-columns:minmax(66px,42%) minmax(0,1fr);gap:4px}
body.service-os #service-shell .service-project-menu-info dt{color:#94b8d9;font-size:.64rem}
body.service-os #service-shell .service-project-menu-info dd{margin:0;color:#e5f3ff;font-size:.67rem;overflow-wrap:anywhere}
body.service-os #service-shell .service-project-menu-info p{
  margin:10px 0 0;border-top:1px solid rgba(128,177,222,.18);
  padding-top:9px;color:#bcd9f3;font-size:.66rem;line-height:1.7;
}
body.service-os #service-shell .service-project-menu-downloads>button{
  display:block;width:100%;margin:5px 0 0;padding:10px 7px;
  background:rgba(45,98,143,.28);border:0;border-radius:8px;
  color:#eaf6ff;text-align:start;font:inherit;font-size:.67rem;
  cursor:pointer;overflow-wrap:anywhere;
}
@media(max-width:890px){
  body.service-os #service-shell .service-project-node>button[data-project-menu]{min-width:38px;min-height:42px}
  body.service-os #service-shell .service-project-menu-actions>a,
  body.service-os #service-shell .service-project-menu-actions>button,
  body.service-os #service-shell .service-project-menu-actions>details{padding:10px 8px;font-size:.7rem}
}

/* HIHIRO_UX_08 — mobile single-line conversation header.
   Preserve the existing service header and Preview action; remove only the
   redundant conversation heading when a service is selected.  Reserve equal
   space on both sides so the *actual title* stays mathematically centered.
   No changes to desktop headers, service selection, project data or actions. */
@media (max-width:890px){
  body.service-os #service-shell.has-selection #stage-2 > .stage-head{
    display:none!important;
  }
  body.service-os #service-shell.has-selection #operation-service-summary.chat-workspace-status:not([hidden]){
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    flex:0 0 52px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 62px!important;
    gap:0!important;
    border-top:0!important;
    border-bottom:1px solid rgba(116,159,211,.18)!important;
    background:rgba(9,31,56,.92)!important;
  }
  body.service-os #service-shell.has-selection #operation-service-summary .chat-workspace-service{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    text-align:center!important;
  }
  body.service-os #service-shell.has-selection #operation-service-summary .chat-workspace-service b{
    display:block!important;
    margin:0!important;
    font-size:clamp(.74rem,2.6vw,.9rem)!important;
    font-weight:850!important;
    line-height:1.3!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-align:center!important;
  }
  /* Service family, state chip and old title were the redundant second line. */
  body.service-os #service-shell.has-selection #operation-service-summary .chat-workspace-service small,
  body.service-os #service-shell.has-selection #operation-service-summary .chat-workspace-meta{
    display:none!important;
  }
  body.service-os #service-shell.has-selection .service-chat-preview-fab{
    top:4px!important;
    right:9px!important;
    z-index:35!important;
  }
  body.service-os #service-shell.has-selection .service-chat-preview-fab .service-project-preview-launch{
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
    padding:0!important;
    gap:0!important;
  }
  body.service-os #service-shell.has-selection .service-chat-preview-fab .service-project-preview-launch span{
    display:none!important;
  }
}

/* Unified V9 layout. The old horizontal track is no longer a mobile gesture surface. */
.workspace-drawer-controls,.workspace-chat-heading,.workspace-drawer-backdrop{display:none}
#service-project-preview-close{width:44px;min-width:44px;height:44px;border:1px solid #8ba9c7;border-radius:12px;background:#153654;color:#fff;font-size:1.6rem;cursor:pointer}
#service-project-preview-close:focus-visible,.workspace-drawer-toggle:focus-visible{outline:3px solid #f1c56b;outline-offset:3px}
.service-chat-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
@media(min-width:891px){
 body.service-os #service-shell .service-option{min-height:66px!important;padding-block:12px!important}
 body.service-os #service-shell .service-project-list{min-height:0!important}
 body.service-os #service-shell .service-project-select{min-height:72px}
}
@media(max-width:890px){
 body.service-os #service-shell{position:relative!important;isolation:isolate;overflow:clip!important}
 body.service-os #service-shell>.service-workspace-track{display:block!important;width:100%!important;overflow:visible!important;scroll-snap-type:none!important;touch-action:pan-y!important;direction:inherit!important}
 body.service-os #service-shell>.service-workspace-track>.service-workbench{width:100%!important;min-width:0!important;max-width:100%!important;direction:inherit!important}
 body.service-os #service-shell>.service-workspace-track>.service-project-pane{position:absolute!important;inset:0 0 0 auto!important;width:35vw!important;min-width:0!important;max-width:35vw!important;height:100%!important;z-index:62!important;transform:translateX(100%)!important;visibility:hidden!important;pointer-events:none!important;direction:inherit!important;transition:transform .2s ease,visibility .2s;box-sizing:border-box!important}
 body.service-os #service-shell[data-drawer=projects]>.service-workspace-track>.service-project-pane{transform:translateX(0)!important;visibility:visible!important;pointer-events:auto!important}
 body.service-os #service-shell>.service-catalog{position:absolute!important;inset:0 auto 0 0!important;width:55vw!important;min-width:0!important;max-width:55vw!important;height:100%!important;z-index:62!important;transform:translateX(-100%)!important;visibility:hidden!important;pointer-events:none!important;transition:transform .2s ease,visibility .2s}
 body.service-os #service-shell[data-drawer=services]>.service-catalog{transform:translateX(0)!important;visibility:visible!important;pointer-events:auto!important}
 .workspace-drawer-controls{display:contents}
 body.service-os #service-shell .workspace-drawer-toggle{display:grid!important;place-items:center!important;position:absolute!important;top:4px!important;inset-inline:auto!important;width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;border:1px solid #7eacd1!important;border-radius:13px!important;background:#133655!important;color:#ffe09b!important;font-size:1.5rem!important;z-index:65!important;transform:none!important;cursor:pointer}
 body.service-os #service-shell #catalog-mobile-toggle{left:max(8px,env(safe-area-inset-left))!important;right:auto!important}
 body.service-os #service-shell #projects-mobile-toggle{right:max(8px,env(safe-area-inset-right))!important;left:auto!important}
 .workspace-chat-heading{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:52px;flex:0 0 52px;padding:8px 60px;text-align:center;font-weight:750;font-size:clamp(.72rem,3vw,1rem);line-height:1.4;background:#0c223a;color:#f4f7fc;overflow-wrap:anywhere}
 .workspace-drawer-backdrop:not([hidden]){display:block;position:absolute;inset:0;z-index:60;background:#020b16a6;border:0;cursor:pointer}
 body.service-os #service-shell.has-selection #operation-service-summary.chat-workspace-status:not([hidden]){height:auto!important;min-height:36px!important;flex-basis:auto!important;padding:8px 12px!important}
 body.service-os #service-shell .service-chat-preview-fab{position:static!important;align-self:flex-end;margin:4px 8px!important}
 body.service-os #service-shell .service-project-header{padding:54px 5px 8px!important;flex-wrap:wrap!important;gap:6px!important}
 body.service-os #service-shell .service-project-filters{display:flex;flex-wrap:wrap;padding-inline:4px}
 body.service-os #service-shell .service-project-filter{flex:1 1 100%;white-space:normal}
 body.service-os #service-shell .service-project-select{padding:8px 4px;gap:3px}
 body.service-os #service-shell .service-project-type-icon{display:none}
 body.service-os #service-shell .service-project-labels b{font-size:.7rem}
 body.service-os #service-shell .service-project-list{min-height:0!important;padding-inline:4px!important}
 body.service-os #service-shell .service-project-new{margin-inline:4px;padding-inline:4px;overflow-wrap:anywhere}
 body.service-os #service-shell .service-project-group-title{flex-wrap:wrap;overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){body.service-os #service-shell>.service-catalog,body.service-os #service-shell>.service-workspace-track>.service-project-pane{transition:none!important}}
@media(max-width:890px){
 body.service-os #main.service-main{width:100%!important;max-width:none!important;padding-inline:0!important;margin-inline:0!important}
 body.service-os .service-main>#service-shell.service-shell,
 body.service-os .service-main>#service-shell.service-shell.has-selection{display:block!important;width:100%!important;max-width:none!important;margin-inline:0!important;padding:0!important;border-inline-width:0!important;border-radius:0!important}
 body.service-os #service-shell .conversation-workspace{display:flex!important;flex-direction:column!important;width:100%!important;grid-template-columns:minmax(0,1fr)!important}
 body.service-os #service-shell .conversation-column{width:100%!important;max-width:none!important;border-radius:0!important;border-inline:0!important}
}
@media(max-width:890px){
 /* The symmetric drawer header is the single mobile conversation heading. */
 body.service-os #service-shell #stage-2>.stage-head{display:none!important}
}

@media(max-width:890px){
 .workspace-chat-heading{position:absolute;top:0;left:0;right:0;z-index:64}
 body.service-os #service-shell .conversation-column{padding-top:52px!important;box-sizing:border-box!important}
 body.service-os #service-shell>.service-catalog{padding-top:52px!important;box-sizing:border-box!important}
 .workspace-drawer-backdrop:not([hidden]){inset:52px 0 0}
}
@media(max-width:890px){
 /* Do not trap the nested Projects pane below its sibling backdrop. */
 body.service-os #service-shell>.service-workspace-track{z-index:auto!important;isolation:auto!important}
}