/* 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;
  }
}