/* Services workspace visual alignment — based on Customer Center visual language */
:root{--service-equal-height:clamp(620px,70vh,760px);--customer-blue:#0b78ef;--customer-gold:#d5a733;--customer-line:rgba(31,91,151,.10);--customer-card:rgba(255,255,255,.82);--customer-shadow:0 17px 48px rgba(43,82,128,.085)}

body.service-os .service-main{width:min(1380px,calc(100% - 28px))}
.service-selection-bar{
  min-height:72px;
  margin:0 0 14px;
  padding:13px 17px;
  border:1px solid rgba(255,255,255,.96);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(238,247,255,.96),rgba(255,250,240,.94));
  box-shadow:0 12px 30px rgba(33,90,150,.065);
  backdrop-filter:blur(18px);
}
.service-selection-bar .selected-mark{background:linear-gradient(145deg,#0b78ef,#155caa);box-shadow:0 9px 24px rgba(11,120,239,.18)}
.service-selection-bar .selected-service small{color:#3373b2;font-weight:900;letter-spacing:.06em}
.service-selection-bar .selected-service h2{color:#12365c}
.service-selection-bar .route-badge{background:#edf6ff;border-color:rgba(11,120,239,.15);color:#0b5cb5}
.service-selection-bar .workbench-state{color:#5e7287}

.service-shell,.service-shell.has-selection{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:14px;
  min-height:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  align-items:stretch;
}
.service-catalog,.service-workbench{
  height:var(--service-equal-height);
  min-height:0;
}
.service-catalog{
  position:relative;
  top:auto;
  align-self:stretch;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.96);
  border-radius:24px;
  background:var(--customer-card);
  box-shadow:var(--customer-shadow);
  backdrop-filter:blur(18px);
}
.catalog-head{
  min-height:64px;
  padding:12px 14px;
  border-bottom:1px solid var(--customer-line);
  background:linear-gradient(135deg,rgba(244,249,255,.96),rgba(255,250,241,.78));
}
.catalog-head b{color:#17304d;font-size:.94rem}
.catalog-head span{color:#748398}
.catalog-reset{border-color:rgba(31,91,151,.10);background:#fff;color:#5f7891;box-shadow:0 6px 18px rgba(41,79,121,.05)}
.service-tree{padding:10px 10px 18px}
.service-group{margin:2px 0 6px;padding:7px 5px 9px;border:1px solid transparent;border-radius:14px}
.service-group:hover{border-color:rgba(31,91,151,.07);background:rgba(249,252,255,.82)}
.service-group-title{padding:6px 7px 8px}
.service-option{
  min-height:36px;
  margin:2px 0;
  padding:7px 10px;
  border:1px solid transparent;
  border-radius:11px;
  color:#42566b;
}
.service-option:hover{border-color:rgba(11,120,239,.10);background:#f1f7ff;color:#1e609f}
.service-option.is-selected,.service-option.is-selected:hover{
  border-color:rgba(11,120,239,.25);
  background:linear-gradient(135deg,#edf6ff,#fff9e9);
  color:#0b5cb5;
  box-shadow:inset 3px 0 0 #0b78ef,0 7px 20px rgba(33,90,150,.055);
}
html[dir="rtl"] .service-option.is-selected,html[dir="rtl"] .service-option.is-selected:hover{box-shadow:inset -3px 0 0 #0b78ef,0 7px 20px rgba(33,90,150,.055)}

.service-workbench{
  min-width:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.workbench-body,.stage-area,.conversation-workspace{height:100%;min-height:0}
.workbench-body{display:block}
.stage-area{display:block}
.conversation-workspace{
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(340px,.86fr);
  gap:14px;
  height:100%;
  min-height:0;
}
.conversation-column,.operation-column{
  min-width:0;
  min-height:0;
  height:100%;
  border:1px solid rgba(255,255,255,.96);
  border-radius:24px;
  background:var(--customer-card);
  box-shadow:var(--customer-shadow);
  backdrop-filter:blur(18px);
}
.conversation-column{border-inline-end:1px solid rgba(255,255,255,.96);overflow:hidden;background:rgba(255,255,255,.84)}
.operation-column{overflow:auto;background:rgba(255,255,255,.84)}
.conversation-empty-visual{height:100%;display:grid;place-content:center;justify-items:center;gap:10px;background:radial-gradient(circle at 50% 38%,rgba(11,120,239,.07),transparent 12rem)}
.conversation-panel:not([hidden]) + .conversation-empty-visual{display:none}
.conversation-empty-mark{width:56px;height:56px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(145deg,#0b78ef,#155caa);color:#fff;font-weight:950;box-shadow:0 10px 28px rgba(11,120,239,.16)}
.conversation-empty-line{display:block;width:116px;height:7px;border-radius:999px;background:#e9f0f7}.conversation-empty-line.short{width:76px;background:#f0e5c8}

.conversation-panel{height:100%;padding:16px!important;background:transparent}
.conversation-panel .stage-head{
  min-height:46px;
  margin:0 0 11px;
  padding:0 2px 11px;
  border-bottom:1px solid var(--customer-line);
}
.conversation-panel .stage-head small{color:#3373b2;letter-spacing:.11em}
.conversation-panel .stage-head h3{color:#17304d;font-size:1rem}
.conversation-panel .agent-thread{
  min-height:0;
  padding:14px;
  border:1px solid rgba(30,90,150,.08);
  border-radius:17px;
  background:linear-gradient(180deg,#f9fbfe,#f4f8fc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.message-bubble{
  border-color:rgba(32,89,149,.09);
  border-radius:15px 15px 15px 5px;
  box-shadow:0 6px 18px rgba(41,79,121,.045);
}
.message-row.customer .message-bubble{
  border-color:transparent;
  background:linear-gradient(135deg,#0b78ef,#0963d2);
  color:#fff;
  border-radius:15px 15px 5px 15px;
  box-shadow:0 8px 20px rgba(11,120,239,.13);
}
.message-row.customer .message-meta{color:#d8eaff}
.message-row.customer .message-copy{color:#dcecff}
.agent-composer{
  margin-top:11px;
  padding:11px 12px;
  border:1px solid rgba(31,91,151,.10);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(41,79,121,.045);
}
.agent-composer textarea{min-height:82px}
.composer-bottom>#visitor-send{background:linear-gradient(135deg,#0b78ef,#0963d2);box-shadow:0 8px 20px rgba(11,120,239,.18)}

.operation-head{
  position:sticky;
  top:0;
  z-index:5;
  min-height:64px;
  padding:12px 15px;
  border-bottom:1px solid var(--customer-line);
  background:linear-gradient(135deg,rgba(244,249,255,.97),rgba(255,250,241,.94));
  backdrop-filter:blur(18px);
}
.operation-head small{color:#3373b2}
.operation-head h3{color:#17304d;font-size:.96rem}
#operation-state{border-color:rgba(31,91,151,.10);background:#fff;color:#718196}
.operation-idle{
  min-height:calc(100% - 92px);
  margin:14px;
  padding:28px;
  border:1px solid rgba(11,120,239,.13);
  border-radius:18px;
  background:linear-gradient(135deg,#f4f9ff,#fffaf1);
}
.operation-idle-mark{background:#0b78ef;box-shadow:0 8px 20px rgba(11,120,239,.18)}
.operation-idle h4{color:#12365c}
.operation-idle p{color:#65778d}
.operation-idle.has-starter{margin:14px;padding:15px;border:1px solid rgba(11,120,239,.11);border-radius:18px;background:linear-gradient(135deg,#f7fbff,#fffaf2)}
.operation-transient,.operation-handoff{
  border-color:rgba(31,91,151,.10);
  border-radius:17px;
  background:linear-gradient(145deg,#fff,#f8fbff);
  box-shadow:0 10px 26px rgba(33,90,150,.055);
}
.operation-choice-card{border-color:rgba(31,91,151,.09);border-radius:14px;background:#f9fbfe}
.operation-choice-card:hover{border-color:rgba(11,120,239,.20);background:#f1f7ff}
.operation-preview-content{border-color:rgba(31,91,151,.08);border-radius:14px;background:#f8fbfe}
.operation-column>.stage-panel{padding:16px}
.operation-column .empty-stage{
  min-height:330px;
  margin:0;
  border:1px solid rgba(31,91,151,.07);
  border-radius:18px;
  background:linear-gradient(135deg,#fbfdff,#fffaf3);
}
.operation-column .empty-symbol{border-color:rgba(11,120,239,.12);background:radial-gradient(circle at 40% 30%,#fff,#edf6ff)}
.chat-starter{border-color:rgba(31,91,151,.10);border-radius:15px;background:linear-gradient(135deg,#f4f9ff,#fffaf1);box-shadow:0 7px 20px rgba(33,90,150,.04)}
.starter-card{border-color:rgba(31,91,151,.09);border-radius:15px;box-shadow:0 7px 18px rgba(41,79,121,.04)}
.starter-card:hover{border-color:rgba(11,120,239,.20);box-shadow:0 10px 24px rgba(33,90,150,.07)}
.token-quote-card{background:linear-gradient(135deg,#eef7ff,#fffaf0)}
.token-quote-value b{color:#0b5cb5}.token-quote-value span{color:#9b6a18}

/* dark mode keeps the same hierarchy */
html[data-theme="dark"] .service-selection-bar{background:linear-gradient(135deg,#10243d,#2b271a);border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .service-selection-bar .selected-service h2{color:#eef4ff}
html[data-theme="dark"] .service-catalog,
html[data-theme="dark"] .conversation-column,
html[data-theme="dark"] .operation-column{background:rgba(13,26,44,.90);border-color:rgba(255,255,255,.08);box-shadow:0 17px 48px rgba(0,0,0,.22)}
html[data-theme="dark"] .catalog-head,
html[data-theme="dark"] .operation-head{background:linear-gradient(135deg,#10243d,#201f18);border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .service-group:hover{background:#0f1b2b;border-color:rgba(255,255,255,.06)}
html[data-theme="dark"] .service-option.is-selected,
html[data-theme="dark"] .service-option.is-selected:hover{background:linear-gradient(135deg,#11243d,#2c2719);border-color:rgba(11,120,239,.30);color:#eef6ff}
html[data-theme="dark"] .conversation-panel .agent-thread{background:#091321;border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .agent-composer{background:#0d1727;border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .operation-idle,
html[data-theme="dark"] .operation-idle.has-starter{background:linear-gradient(135deg,#10243d,#2b271a);border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .operation-idle h4,html[data-theme="dark"] .operation-head h3{color:#eef4ff}
html[data-theme="dark"] .operation-idle p{color:#aebdd0}

@media(max-width:1020px){
  :root{--service-equal-height:clamp(600px,68vh,720px)}
  body.service-os .service-main{width:min(100% - 14px,1380px)}
  .service-shell,.service-shell.has-selection{grid-template-columns:235px minmax(0,1fr);gap:10px}
  .conversation-workspace{grid-template-columns:minmax(0,1fr) minmax(310px,.82fr);gap:10px}
}
@media(max-width:890px){
  .service-catalog,.service-workbench{height:auto}
  .service-shell,.service-shell.has-selection{grid-template-columns:220px minmax(0,1fr);min-height:0}
  .service-workbench{min-height:0}
  .conversation-workspace{height:auto;grid-template-columns:1fr;grid-template-rows:minmax(430px,62vh) auto;gap:12px}
  .conversation-column,.operation-column{height:auto;min-height:0;border-radius:22px}
  .conversation-column{min-height:430px}
  .operation-column{overflow:visible}
  .operation-head{position:static}
  .operation-idle{min-height:230px}
}
@media(max-width:680px){
  body.service-os .service-main{width:min(100% - 12px,1380px)}
  .service-selection-bar{min-height:64px;margin-bottom:10px;padding:10px 12px;border-radius:17px}
  .service-selection-bar.workbench-head{padding-inline-start:12px}
  .service-selection-bar .selected-service h2{max-width:190px}
  .service-shell,.service-shell.has-selection{display:block;position:relative;min-height:730px}
  .service-workbench{width:100%;min-height:730px;height:auto}
  .service-catalog{
    position:absolute;
    top:0;
    right:0;
    left:auto;
    z-index:30;
    width:72%;
    height:100%;
    border-radius:0 18px 18px 0;
    border-color:rgba(31,91,151,.10);
    background:rgba(255,255,255,.96);
    box-shadow:-18px 0 42px rgba(20,43,70,.14)
  }
  .service-shell:not(.mobile-catalog-open) .service-catalog{background:transparent;box-shadow:none}
  .conversation-workspace{grid-template-rows:minmax(390px,58vh) auto;gap:10px}
  .conversation-column,.operation-column{border-radius:18px}
  .conversation-panel{padding:10px!important;min-height:390px}
  .operation-column>.stage-panel{padding:12px}
  .operation-idle{margin:10px;min-height:210px;padding:18px}
}
@media(max-width:470px){
  .service-selection-bar{border-radius:15px}
  .service-selection-bar .selected-service h2{max-width:145px}
  .conversation-column,.operation-column{border-radius:16px}
  .catalog-head{padding-left:50px}
}
@media(prefers-reduced-motion:reduce){.service-option,.starter-card{transition:none}}


/* Desktop unified dashboard geometry — stage 1 */
@media(min-width:891px){
  :root{
    --service-desktop-gap:12px;
    --service-desktop-height:calc(100dvh - 82px);
  }
  body.service-os{
    height:100dvh;
    overflow:hidden;
  }
  body.service-os .service-main{
    width:min(1600px,calc(100% - 24px));
    height:var(--service-desktop-height);
    min-height:0;
    margin:0 auto;
    padding:10px 0;
    overflow:hidden;
  }
  .service-intro,
  .service-selection-bar{
    display:none!important;
  }
  .service-shell,
  .service-shell.has-selection{
    width:100%;
    height:100%;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(250px,24%) minmax(0,76%);
    gap:var(--service-desktop-gap);
    padding:0;
    overflow:hidden;
    align-items:stretch;
    direction:ltr;
  }
  .service-catalog,
  .service-workbench{
    height:100%;
    min-height:0;
    max-height:100%;
  }
  .service-catalog{
    overflow:hidden;
  }
  .service-tree{
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
  }
  .service-workbench{
    min-width:0;
    overflow:hidden;
    direction:ltr;
  }
  .workbench-body,
  .stage-area,
  .conversation-workspace{
    height:100%;
    min-height:0;
  }
  .conversation-workspace{
    display:grid;
    grid-template-columns:minmax(0,68%) minmax(300px,32%);
    gap:var(--service-desktop-gap);
    overflow:hidden;
    direction:ltr;
  }
  .conversation-column,
  .operation-column{
    height:100%;
    min-height:0;
    max-height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
  }
  html[dir="rtl"] .service-catalog,
  html[dir="rtl"] .conversation-column,
  html[dir="rtl"] .operation-column{direction:rtl}
  html[dir="ltr"] .service-catalog,
  html[dir="ltr"] .conversation-column,
  html[dir="ltr"] .operation-column{direction:ltr}
}


/* Services premium blue/gold dashboard — stage 2 */
:root{
  --svc-navy-0:#040b16;
  --svc-navy-1:#071425;
  --svc-navy-2:#0a1d35;
  --svc-navy-3:#102a49;
  --svc-blue:#087cff;
  --svc-blue-soft:#4aa8ff;
  --svc-gold:#e5b64d;
  --svc-gold-soft:#ffd77a;
  --svc-text:#f4f8ff;
  --svc-muted:#92a8c3;
  --svc-line:rgba(102,166,234,.18);
  --svc-line-strong:rgba(83,161,244,.34);
  --svc-glass:rgba(6,24,45,.88);
  --svc-glass-2:rgba(9,31,56,.92);
  --svc-shadow:0 22px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.045);
}
body.service-os{
  color:var(--svc-text);
  background:
    radial-gradient(circle at 16% 0,rgba(10,126,255,.25),transparent 34rem),
    radial-gradient(circle at 86% 4%,rgba(227,177,72,.16),transparent 30rem),
    linear-gradient(180deg,#030914 0,#071528 52%,#06111f 100%);
}
body.service-os::before{
  opacity:.22;
  background-image:
    linear-gradient(rgba(91,165,247,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,165,247,.035) 1px,transparent 1px);
  background-size:44px 44px;
}
body.service-os .service-main{color:var(--svc-text)}

.service-shell,.service-shell.has-selection{
  border:1px solid rgba(90,156,232,.2);
  border-radius:28px;
  padding:8px;
  background:
    radial-gradient(circle at 48% 0,rgba(13,117,231,.08),transparent 34rem),
    linear-gradient(145deg,rgba(7,25,47,.96),rgba(4,15,29,.95));
  box-shadow:0 28px 90px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.045);
}

.service-catalog,
.conversation-column,
.operation-column{
  border:1px solid var(--svc-line);
  background:
    radial-gradient(circle at 18% 0,rgba(12,121,247,.13),transparent 21rem),
    linear-gradient(180deg,rgba(8,29,54,.97),rgba(5,19,36,.97));
  box-shadow:var(--svc-shadow);
  backdrop-filter:blur(18px);
  position:relative;
}
.service-catalog::after,
.conversation-column::after,
.operation-column::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at 92% 0,rgba(255,204,95,.42),transparent 8rem),
    radial-gradient(circle at 6% 0,rgba(21,127,255,.25),transparent 9rem);
  opacity:.28;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  padding:1px;
}
.service-catalog{border-radius:22px;overflow:hidden}
.conversation-column,.operation-column{border-radius:22px}
.conversation-column{display:flex;flex-direction:column;overflow:hidden!important}
.operation-column{overflow-y:auto!important;overflow-x:hidden!important}

/* catalog */
.catalog-head{
  min-height:82px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px 15px;
  border-bottom:0;
  background:
    radial-gradient(circle at 100% 0,rgba(229,182,77,.16),transparent 11rem),
    linear-gradient(180deg,rgba(12,43,77,.82),rgba(7,27,50,.58));
}
.catalog-head-icon{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgba(63,151,255,.25);border-radius:13px;
  color:#fff;background:linear-gradient(145deg,#0c5ec7,#0a87ff);
  box-shadow:0 10px 25px rgba(3,104,228,.24),inset 0 1px 0 rgba(255,255,255,.16)
}
.catalog-head-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.catalog-head-copy{min-width:0}
.catalog-head-copy b{display:block;color:#fff;font-size:1.02rem;font-weight:950;letter-spacing:-.02em}
.catalog-head-copy span{display:block;margin-top:4px;color:var(--svc-muted);font-size:.68rem;font-weight:650}
.catalog-reset{display:none!important}
.catalog-search{
  height:48px;
  margin:0 13px 11px;
  padding:0 13px;
  display:flex;align-items:center;gap:10px;
  border:1px solid rgba(101,167,239,.2);
  border-radius:14px;
  background:rgba(10,31,56,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)
}
.catalog-search svg{flex:0 0 22px;width:22px;height:22px;fill:none;stroke:#9cc5f3;stroke-width:1.8;stroke-linecap:round}
.catalog-search input{
  width:100%;min-width:0;height:100%;border:0;outline:0;background:transparent;color:#fff;
  font-size:.72rem;text-align:start
}
.catalog-search input::placeholder{color:#718aa7}
.catalog-search input::-webkit-search-cancel-button{filter:invert(1);opacity:.55}
.service-tree{
  padding:0 10px 14px;
  scrollbar-color:rgba(175,205,237,.65) transparent;
  scrollbar-width:thin;
}
.service-tree::-webkit-scrollbar,.operation-column::-webkit-scrollbar,.agent-thread::-webkit-scrollbar{width:7px}
.service-tree::-webkit-scrollbar-track,.operation-column::-webkit-scrollbar-track,.agent-thread::-webkit-scrollbar-track{background:transparent}
.service-tree::-webkit-scrollbar-thumb,.operation-column::-webkit-scrollbar-thumb,.agent-thread::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(#9ab9d9,#d8e4ef)}
.service-group{margin:0;padding:0;border:0!important;border-radius:0;background:none!important}
.service-group-title{display:none!important}
.service-children{display:grid;gap:7px;margin:0 0 7px}
.service-option{
  min-height:62px!important;
  margin:0!important;
  padding:8px 11px!important;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) 20px;
  align-items:center;
  gap:10px;
  direction:ltr!important;
  border:1px solid rgba(91,151,218,.17)!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,rgba(14,43,75,.86),rgba(7,28,52,.88))!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.028);
  transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease
}
.service-option:hover{
  transform:translateY(-1px);
  border-color:rgba(82,166,255,.42)!important;
  background:linear-gradient(135deg,rgba(15,55,94,.94),rgba(8,35,64,.94))!important;
  box-shadow:0 10px 26px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.045)
}
.service-option-icon{
  width:44px!important;height:44px;
  display:grid!important;place-items:center;
  border-radius:12px;
  color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);
  pointer-events:none
}
.service-option-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service-option-copy{min-width:0;width:auto!important;text-align:center!important;pointer-events:none}
html[dir="rtl"] .service-option-copy{direction:rtl!important}
html[dir="ltr"] .service-option-copy{direction:ltr!important}
.service-option-copy b{display:block;color:#f7fbff;font-size:.82rem;font-weight:900;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service-option-copy small{display:block;margin-top:3px;color:#93a8c2;font-size:.63rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service-option-chevron{width:auto!important;color:#9ab0c8;font-size:1.6rem;font-weight:300;line-height:1;text-align:center!important;direction:ltr!important;transform:none!important;pointer-events:none}
.service-option.is-selected,.service-option.is-selected:hover{
  border-color:rgba(255,205,105,.75)!important;
  background:
    radial-gradient(circle at 100% 0,rgba(255,199,83,.27),transparent 9rem),
    linear-gradient(135deg,rgba(22,67,112,.98),rgba(44,42,43,.93))!important;
  color:#fff!important;
  box-shadow:0 0 0 1px rgba(255,206,103,.14),0 10px 30px rgba(217,164,55,.16),inset 0 1px 0 rgba(255,244,202,.14)!important
}
html[dir="rtl"] .service-option.is-selected,html[dir="rtl"] .service-option.is-selected:hover{box-shadow:0 0 0 1px rgba(255,206,103,.14),0 10px 30px rgba(217,164,55,.16),inset 0 1px 0 rgba(255,244,202,.14)!important}
.service-group[data-accent="violet"] .service-option-icon{background:linear-gradient(145deg,#5c51d9,#2588ff)}
.service-group[data-accent="blue"] .service-option-icon{background:linear-gradient(145deg,#1263df,#0aa7ff)}
.service-group[data-accent="cyan"] .service-option-icon{background:linear-gradient(145deg,#0870d8,#19bfd1)}
.service-group[data-accent="indigo"] .service-option-icon{background:linear-gradient(145deg,#6547d7,#7154ff)}
.service-group[data-accent="electric"] .service-option-icon{background:linear-gradient(145deg,#0765e7,#00a6ff)}
.service-group[data-accent="gold"] .service-option-icon{background:linear-gradient(145deg,#a86b14,#e7b342)}
.service-group[data-accent="rose"] .service-option-icon{background:linear-gradient(145deg,#d73963,#ff5b79)}
.service-group[data-accent="teal"] .service-option-icon{background:linear-gradient(145deg,#078a83,#21c8a9)}
.service-group[data-accent="emerald"] .service-option-icon{background:linear-gradient(145deg,#0d7e5b,#21bd79)}
.service-group[data-accent="amber"] .service-option-icon{background:linear-gradient(145deg,#aa7418,#e6aa35)}
.service-group[data-accent="lime"] .service-option-icon{background:linear-gradient(145deg,#4c8525,#7bcf3e)}
.service-group[data-accent="slate"] .service-option-icon{background:linear-gradient(145deg,#526985,#7089a7)}

/* chat panel + hero */
.chat-hero{
  position:relative;
  flex:0 0 clamp(156px,23vh,205px);
  min-height:150px;
  overflow:hidden;
  border-bottom:1px solid rgba(90,164,242,.19);
  background-image:
    linear-gradient(90deg,rgba(3,13,27,.08),rgba(3,14,28,.04) 45%,rgba(4,15,31,.30)),
    url('/hihiro-services-chat-hero.webp');
  background-size:cover;
  background-position:center;
  isolation:isolate
}
.chat-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 65%,rgba(5,18,35,.7));
  pointer-events:none
}
.chat-hero-copy{
  position:absolute;right:4%;top:50%;width:52%;transform:translateY(-50%);
  text-align:start;text-shadow:0 2px 16px rgba(0,0,0,.42)
}
.chat-hero-copy h2{margin:0 0 9px;color:#fff;font-size:clamp(1.18rem,2vw,1.85rem);line-height:1.3;font-weight:950;letter-spacing:-.035em}
.chat-hero-brand{display:inline-block;margin:0 .13em;font-family:"Segoe UI",Arial,sans-serif;font-weight:950;color:var(--svc-gold-soft)}
.chat-hero-brand b{color:#1493ff}
.chat-hero-copy p{margin:0;color:#eef5ff;font-size:clamp(.72rem,1vw,.9rem);font-weight:750;line-height:1.7}
.chat-hero-copy small{display:block;margin-top:4px;color:#9db4d2;font-size:clamp(.62rem,.86vw,.76rem);line-height:1.7}
.conversation-panel{
  flex:1 1 0;
  min-height:0!important;
  height:auto!important;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding:11px!important;
  background:transparent!important
}
.conversation-panel .stage-head{
  min-height:38px;margin:0 0 8px;padding:0 3px 8px;
  border-color:rgba(96,158,226,.13)
}
.conversation-panel .stage-head small{color:#55a9ff}
.conversation-panel .stage-head h3{color:#eaf3ff;font-size:.86rem}
.conversation-panel .agent-thread{
  height:auto!important;
  min-height:0!important;
  overflow-y:auto;
  border:1px solid rgba(86,148,216,.14);
  background:linear-gradient(180deg,rgba(7,25,47,.92),rgba(5,20,39,.94));
  color:#eaf3ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)
}
.message-bubble{
  border-color:rgba(93,150,211,.16)!important;
  background:rgba(15,42,72,.88);
  color:#e8f2ff;
  box-shadow:none
}
.message-copy,.message-bubble p{color:inherit}
.message-row.customer .message-bubble{
  background:linear-gradient(135deg,#087cf5,#075fc6);
  color:#fff;
  box-shadow:0 8px 22px rgba(3,96,211,.2)
}
.agent-composer{
  margin-top:8px;
  padding:9px 10px;
  border:1px solid rgba(81,151,227,.22);
  border-radius:15px;
  background:linear-gradient(180deg,rgba(13,40,69,.96),rgba(8,29,52,.98));
  box-shadow:0 10px 25px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035)
}
.agent-composer textarea{
  min-height:58px!important;
  color:#f4f8ff!important;background:transparent!important;border-color:rgba(255,255,255,.04)!important
}
.agent-composer textarea::placeholder{color:#8198b5}
.composer-bottom{border-color:rgba(102,159,220,.12)!important}
.composer-bottom>#visitor-send{
  min-width:78px;
  border:1px solid rgba(97,177,255,.4)!important;
  background:linear-gradient(145deg,#128eff,#0864d9)!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(4,103,230,.26)!important
}
.composer-tool{border-color:rgba(95,154,217,.18)!important;background:rgba(15,44,75,.88)!important;color:#b9d7f7!important}
#chat-status{color:#8097b3!important}
.conversation-empty-visual{
  flex:1 1 0;height:auto!important;min-height:0;
  background:
    radial-gradient(circle at 50% 34%,rgba(20,127,244,.16),transparent 13rem),
    linear-gradient(180deg,rgba(7,27,51,.84),rgba(6,22,42,.92))
}
.conversation-empty-mark{
  background:linear-gradient(145deg,#1190ff,#0669d9);
  box-shadow:0 10px 28px rgba(0,110,242,.26)
}
.conversation-empty-line{background:#143b64}.conversation-empty-line.short{background:#5b4b2e}

/* operations */
.operation-head{
  position:sticky;top:0;z-index:7;
  min-height:94px;
  padding:14px 15px 11px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  border-bottom:1px solid rgba(91,155,226,.16);
  background:
    radial-gradient(circle at 100% 0,rgba(229,182,77,.16),transparent 10rem),
    linear-gradient(180deg,rgba(9,35,64,.98),rgba(7,27,51,.96));
  backdrop-filter:blur(18px)
}
.operation-head-copy{min-width:0;flex:1}
.operation-title-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.operation-title-line h3{margin:0;color:#fff!important;font-size:.94rem!important;font-weight:950}
.operation-head p{margin:5px 0 0;color:#8298b4;font-size:.61rem;line-height:1.6}
.operation-live-badge{
  height:27px;padding:0 8px;display:inline-flex;align-items:center;gap:6px;
  border:1px solid rgba(34,145,255,.28);border-radius:8px;
  background:linear-gradient(145deg,#0757ba,#0b7cff);color:#fff;
  box-shadow:0 7px 18px rgba(3,94,207,.19)
}
.operation-live-badge i{width:14px;height:10px;display:block;background:linear-gradient(90deg,transparent 0 10%,#bce1ff 10% 18%,transparent 18% 32%,#fff 32% 42%,transparent 42% 56%,#bce1ff 56% 64%,transparent 64% 78%,#fff 78% 86%,transparent 86%)}
.operation-live-badge b{font-size:.57rem;letter-spacing:.08em}
#operation-state{
  flex:0 0 auto;
  max-width:105px;
  padding:5px 8px;
  border:1px solid rgba(90,154,225,.16)!important;border-radius:999px;
  background:rgba(10,35,62,.9)!important;color:#94b0cf!important;
  font-size:.56rem!important;text-align:center;white-space:normal
}
.operation-service-summary{
  margin:12px 12px 4px;
  min-height:66px;
  padding:9px 10px;
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;
  border:1px solid rgba(72,161,255,.38);
  border-radius:15px;
  background:
    radial-gradient(circle at 0 0,rgba(235,183,69,.17),transparent 8rem),
    linear-gradient(135deg,rgba(17,53,90,.9),rgba(8,33,60,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)
}
.operation-service-icon{
  width:40px;height:40px;display:grid;place-items:center;border-radius:11px;
  background:linear-gradient(145deg,#116fdd,#159dff);color:#fff;
  box-shadow:0 7px 18px rgba(5,102,215,.23)
}
.operation-service-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.operation-service-summary b{display:block;color:#f6f9ff;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.operation-service-summary small{display:block;margin-top:3px;color:#8da5c0;font-size:.59rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.operation-selected-pill{
  padding:5px 7px;border-radius:999px;background:linear-gradient(145deg,#7254e7,#8f5df0);
  color:#fff;font-size:.5rem;font-weight:900;white-space:nowrap
}
.operation-idle{
  min-height:0!important;
  margin:10px 12px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important
}
.operation-idle-mark{display:none}
.operation-context-simple{padding:4px 2px 8px}
.operation-context-simple>small{display:block;color:#4aa9ff;font-size:.57rem;font-weight:900;letter-spacing:.08em}
.operation-context-simple h4{margin:5px 0 7px;color:#f5f8ff!important;font-size:.92rem}
.operation-context-simple>p{margin:0;color:#9db0c8!important;font-size:.68rem;line-height:1.75}
.operation-context-deliverable{
  margin:11px 0 0;padding:10px 0;
  border-top:1px solid rgba(91,155,224,.14);
  border-bottom:1px solid rgba(91,155,224,.14);
  color:#dce9f8;font-size:.66rem;line-height:1.72
}
.operation-context-needs{padding-top:10px}
.operation-context-needs>b{display:block;margin-bottom:6px;color:#f0c86d;font-size:.62rem}
.operation-context-needs ul{margin:0;padding-inline-start:18px;display:grid;gap:5px;color:#9eb2ca;font-size:.64rem;line-height:1.55}
.operation-context-needs li::marker{color:#188cff}
.operation-transient,.operation-handoff{
  margin:10px 12px!important;
  padding:12px!important;
  border:1px solid rgba(83,155,232,.2)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(12,42,72,.95),rgba(7,28,52,.96))!important;
  color:#e9f2ff;
  box-shadow:none!important
}
.operation-transient h4,.operation-handoff h4{color:#f4f8ff!important}
.operation-transient p,.operation-handoff p{color:#91a8c3!important}
.operation-choice-options{display:grid;gap:7px}
.operation-choice-card{
  border-color:rgba(85,155,230,.2)!important;
  background:rgba(12,43,75,.88)!important;
  color:#eef5ff!important;
  box-shadow:none!important
}
.operation-choice-card:hover{border-color:rgba(45,145,255,.5)!important;background:rgba(14,52,89,.96)!important}
.operation-preview-content{border-color:rgba(81,148,221,.16)!important;background:rgba(7,25,47,.9)!important;color:#e7f0fc!important}
.operation-column>.stage-panel{padding:12px!important;background:transparent!important}
.operation-column .empty-stage{
  min-height:260px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important
}
.operation-column .empty-stage h3{color:#edf5ff}
.operation-column .empty-stage p{color:#8fa5bf}
.operation-column .empty-symbol{border-color:rgba(60,150,246,.2)!important;background:radial-gradient(circle at 40% 30%,#0e6ed9,#082a50)!important}
.token-quote-card{background:linear-gradient(145deg,rgba(15,57,92,.98),rgba(47,39,22,.94))!important}
.token-quote-value b{color:#7ec0ff!important}.token-quote-value span{color:#efc667!important}
.primary-action,#operation-token-confirm,#continue-account{
  border:1px solid rgba(255,218,128,.65)!important;
  background:linear-gradient(135deg,#f3c55f,#c98e29)!important;
  color:#171006!important;
  box-shadow:0 9px 23px rgba(205,148,39,.22)!important
}
.secondary-action{border-color:rgba(81,157,238,.28)!important;background:#0c3867!important;color:#e8f3ff!important}

/* visual starter is intentionally limited to two compact choices */
.operation-idle.has-starter{margin:10px 12px!important;padding:0!important}
.starter-operation-head{padding:0 0 9px!important;border-bottom:1px solid rgba(91,155,224,.14)}
.starter-operation-head h4{color:#f3f7ff!important}
.starter-operation-head p{color:#91a8c3!important}
.starter-operation-service{display:none!important}
.starter-card-grid{grid-template-columns:1fr!important;gap:7px!important;margin-top:9px!important}
.starter-card{
  min-height:76px!important;
  border:1px solid rgba(83,155,231,.2)!important;
  background:rgba(10,38,68,.9)!important;
  color:#f2f7ff!important;
  box-shadow:none!important
}
.starter-card:hover,.starter-card.is-selected{border-color:rgba(235,184,74,.55)!important;background:linear-gradient(135deg,rgba(15,54,90,.96),rgba(45,40,30,.95))!important}
.starter-thumb{width:92px!important}
.starter-card-copy small{color:#8ea7c4!important}
.starter-default{border-color:rgba(83,154,229,.18)!important;background:rgba(8,31,57,.86)!important;color:#e7f1fd!important}

/* keep the same blue/gold language regardless of global light/dark preference */
html[data-theme="light"] .service-catalog,
html[data-theme="light"] .conversation-column,
html[data-theme="light"] .operation-column,
html[data-theme="dark"] .service-catalog,
html[data-theme="dark"] .conversation-column,
html[data-theme="dark"] .operation-column{
  background:
    radial-gradient(circle at 18% 0,rgba(12,121,247,.13),transparent 21rem),
    linear-gradient(180deg,rgba(8,29,54,.97),rgba(5,19,36,.97))!important;
  border-color:var(--svc-line)!important
}

@media(min-width:891px){
  body.service-os .service-main{padding:9px 0!important}
  .service-shell,.service-shell.has-selection{gap:10px!important;padding:8px!important}
  .conversation-workspace{gap:10px!important}
}
@media(max-width:890px){
  body.service-os{background:linear-gradient(180deg,#040b16,#08172a 55%,#06101d)}
  .service-catalog,.conversation-column,.operation-column{border-radius:18px!important}
  .chat-hero{flex-basis:165px}
  .chat-hero-copy{right:4%;width:58%}
  .service-option{min-height:58px!important}
}
@media(max-width:680px){
  .catalog-head{min-height:76px;padding:12px}
  .catalog-search{margin-inline:10px}
  .service-catalog{background:linear-gradient(180deg,rgba(7,27,51,.99),rgba(4,17,33,.99))!important}
  .chat-hero{min-height:145px;flex-basis:145px;background-position:38% center}
  .chat-hero-copy{right:4%;width:60%}
  .chat-hero-copy h2{font-size:1.08rem}
  .chat-hero-copy p{font-size:.67rem}
  .chat-hero-copy small{font-size:.58rem}
  .operation-head{min-height:88px}
  .operation-service-summary{margin:9px 9px 3px}
  .operation-idle,.operation-transient,.operation-handoff{margin-inline:9px!important}
}
@media(max-width:470px){
  .chat-hero{background-position:32% center}
  .chat-hero-copy{width:62%;right:3%}
  .service-option{grid-template-columns:42px minmax(0,1fr) 18px}
  .service-option-icon{width:40px!important;height:40px}
}

/* dashboard chrome finishing */
.service-topbar{
  border-color:rgba(82,151,229,.22)!important;
  background:
    radial-gradient(circle at 20% 0,rgba(13,116,235,.16),transparent 20rem),
    linear-gradient(180deg,rgba(5,20,38,.94),rgba(4,15,29,.94))!important;
  box-shadow:0 15px 44px rgba(0,0,0,.28),inset 0 -1px 0 rgba(229,182,77,.2)!important
}
.service-nav{background:rgba(12,37,65,.7)!important;border-color:rgba(80,146,216,.14)!important}
.service-nav a.is-current{
  color:#fff!important;
  background:linear-gradient(145deg,rgba(17,91,174,.58),rgba(71,58,30,.48))!important;
  box-shadow:inset 0 -1px 0 rgba(239,192,87,.44)
}
.service-brand img{box-shadow:0 0 0 1px rgba(235,188,84,.25),0 8px 22px rgba(0,0,0,.24)!important}
.service-option>span:not(.service-option-icon):not(.service-option-copy):not(.service-option-chevron){
  grid-column:1/-1;width:100%!important;color:#f4f8ff;text-align:start!important
}


/* HIHIRO_UNIFIED_CHAT_WORKSPACE_V2
   Two-card Services workspace: catalog + conversation.
   The outer geometry never grows with catalog, message, operation, or handoff content.
   Catalog and conversation own their scrolling independently; the composer stays fixed. */
.service-shell,.service-shell.has-selection{
  grid-template-columns:minmax(260px,28%) minmax(0,72%)!important;
  align-items:stretch!important;
  overflow:hidden!important
}
.service-catalog,.service-workbench,
.workbench-body,.stage-area,.conversation-workspace,.conversation-column{
  min-height:0!important;
  max-height:100%!important
}
.service-catalog{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important
}
.catalog-head,.catalog-search{flex:0 0 auto}
.service-tree{
  flex:1 1 0!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable
}
.service-tree::-webkit-scrollbar,.chat-scroll::-webkit-scrollbar{width:7px}
.service-tree::-webkit-scrollbar-track,.chat-scroll::-webkit-scrollbar-track{background:transparent}
.service-tree::-webkit-scrollbar-thumb,.chat-scroll::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:999px;
  background:rgba(91,158,230,.38);
  background-clip:padding-box
}
.service-workbench{overflow:hidden!important}
.workbench-body,.stage-area,.conversation-workspace{height:100%!important}
.conversation-workspace{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr)!important;
  gap:0!important;
  overflow:hidden!important
}
.operation-column{display:none!important}
.conversation-column{
  width:100%!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border:1px solid var(--svc-line)!important;
  border-inline-end:1px solid var(--svc-line)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 18% 0,rgba(12,121,247,.12),transparent 23rem),
    linear-gradient(180deg,rgba(8,29,54,.98),rgba(5,19,36,.98))!important;
  box-shadow:var(--svc-shadow)!important
}
.chat-hero{
  flex:0 0 168px!important;
  min-height:168px!important;
  max-height:168px!important
}
#stage-2.conversation-panel{
  flex:1 1 0!important;
  width:100%;
  height:auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding:0!important;
  background:transparent!important
}
#stage-2.conversation-panel[hidden]{display:none!important}
#stage-2 .stage-head{
  flex:0 0 auto;
  min-height:48px;
  margin:0!important;
  padding:10px 14px!important;
  border-top:1px solid rgba(85,151,221,.10);
  border-bottom:1px solid rgba(85,151,221,.14)!important;
  background:rgba(5,22,41,.74)
}
#stage-2 .stage-head h3{margin:2px 0 0!important;color:#f3f7ff!important;font-size:.88rem!important}
#stage-2 .stage-head small{color:#4aa8ff!important}

.chat-workspace-status{
  flex:0 0 auto;
  min-height:58px;
  margin:0;
  padding:8px 14px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(85,151,221,.13);
  background:
    radial-gradient(circle at 100% 0,rgba(229,182,77,.10),transparent 12rem),
    rgba(8,29,53,.88)
}
.chat-workspace-status[hidden]{display:none!important}
.chat-workspace-status .operation-service-icon{
  width:36px!important;
  height:36px!important;
  border-radius:10px!important
}
.chat-workspace-status .operation-service-icon svg{width:20px!important;height:20px!important}
.chat-workspace-service{min-width:0}
.chat-workspace-service b{
  display:block;
  overflow:hidden;
  color:#f6f9ff;
  font-size:.75rem;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap
}
.chat-workspace-service small{
  display:block;
  margin-top:2px;
  overflow:hidden;
  color:#8ea5c0;
  font-size:.56rem;
  text-overflow:ellipsis;
  white-space:nowrap
}
.chat-workspace-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0
}
.chat-workspace-state{
  max-width:132px;
  padding:5px 8px;
  overflow:hidden;
  border:1px solid rgba(79,151,229,.16);
  border-radius:999px;
  background:rgba(9,38,67,.86);
  color:#9db9d8;
  font-size:.54rem;
  font-weight:850;
  text-overflow:ellipsis;
  white-space:nowrap
}
.chat-workspace-status .operation-selected-pill{
  padding:5px 7px!important;
  font-size:.48rem!important
}

.chat-scroll{
  flex:1 1 0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:12px 14px 10px;
  scroll-behavior:smooth
}
.conversation-panel .agent-thread{
  display:flex!important;
  flex:none!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  gap:9px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important
}
.agent-thread:empty{display:none!important}
.chat-action-stream{
  display:grid;
  gap:10px;
  min-width:0;
  padding:10px 0 2px
}
.chat-action-stream:empty{display:none}
.chat-action-stream>.legacy-stage-anchor{display:none!important}
.chat-action-stream>.stage-panel,
.chat-action-stream>.operation-transient,
.chat-action-stream>.operation-handoff{
  flex:0 0 auto!important;
  min-height:0!important;
  margin:0!important;
  padding:12px 13px!important;
  border:1px solid rgba(83,155,232,.19)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(12,42,72,.94),rgba(7,28,52,.96))!important;
  box-shadow:none!important
}
.chat-action-stream>.stage-panel[hidden],
.chat-action-stream>.operation-transient[hidden],
.chat-action-stream>.operation-handoff[hidden],
.chat-action-stream>#quick-choices[hidden]{display:none!important}
.chat-action-stream>#operation-idle{display:none!important}
.chat-action-stream .stage-head{
  min-height:0!important;
  margin:0 0 10px!important;
  padding:0 0 9px!important;
  border-top:0!important;
  border-bottom:1px solid rgba(91,155,224,.13)!important;
  background:transparent!important
}
.chat-action-stream .stage-head h3{font-size:.86rem!important}
.chat-action-stream .operation-transient-head small,
.chat-action-stream .stage-head small{color:#51aaff!important}
.chat-action-stream .operation-transient h4,
.chat-action-stream .operation-handoff h4,
.chat-action-stream .stage-panel h3{color:#f4f8ff!important}
.chat-action-stream .operation-transient p,
.chat-action-stream .operation-handoff p,
.chat-action-stream .stage-panel p{color:#9db0c8!important}
.chat-action-stream .operation-choice-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:7px}
.chat-action-stream .operation-choice-card{
  min-height:0!important;
  padding:10px!important;
  border:1px solid rgba(84,154,229,.2)!important;
  border-radius:12px!important;
  background:rgba(11,41,71,.9)!important;
  color:#eef5ff!important;
  box-shadow:none!important
}
.chat-action-stream .operation-choice-card:hover{
  border-color:rgba(49,148,255,.48)!important;
  background:rgba(14,52,89,.96)!important
}
.chat-action-stream .operation-preview-content{
  max-height:52vh;
  overflow:auto;
  border-color:rgba(81,148,221,.16)!important;
  background:rgba(6,24,45,.92)!important;
  color:#e7f0fc!important
}
.chat-action-stream .operation-preview-frame{width:100%;min-height:360px;border:0;border-radius:10px;background:#fff}
.chat-action-stream .package-panel{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;
  gap:8px!important
}
.chat-action-stream .package-card{
  min-height:0!important;
  padding:12px 12px 44px!important;
  border-color:rgba(83,155,232,.18)!important;
  background:rgba(9,35,63,.92)!important;
  box-shadow:none!important
}
.chat-action-stream .proposal-scope{
  margin:0 0 10px!important;
  border-color:rgba(83,155,232,.17)!important;
  background:rgba(8,31,56,.9)!important
}
.chat-action-stream .empty-stage,
.chat-action-stream .empty-stage.compact{
  min-height:0!important;
  padding:16px 8px!important
}
.chat-action-stream .route-panel{
  min-height:0!important;
  margin-bottom:9px!important;
  border-color:rgba(83,155,232,.16)!important;
  background:rgba(8,31,56,.88)!important
}
.chat-action-stream .claim-ready{margin-top:8px}
.chat-action-stream .inline-auth{
  max-width:none!important;
  margin:10px 0 0!important;
  border-color:rgba(83,155,232,.18)!important;
  background:rgba(8,31,56,.92)!important;
  box-shadow:none!important
}
.chat-action-stream .auth-tabs{background:rgba(4,20,38,.7)!important}
.chat-action-stream .auth-tabs button.is-active{background:#123b67!important;color:#fff!important}
.chat-action-stream .compact-form input{
  border-color:rgba(92,157,226,.18)!important;
  background:#071b31!important;
  color:#f3f7ff!important
}
.chat-action-stream .execution-panel{
  min-height:0!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  gap:14px!important;
  padding:12px!important;
  border-color:rgba(83,155,232,.16)!important;
  background:rgba(8,31,56,.88)!important
}
.chat-action-stream .execution-orbit{width:64px!important;height:64px!important}
.chat-action-stream .execution-orbit::before{width:48px!important;height:48px!important}
.chat-action-stream .execution-orbit::after{width:78px!important;height:78px!important}
.chat-action-stream .delivery-panel{
  padding:12px!important;
  border-color:rgba(75,185,132,.22)!important;
  background:rgba(9,43,40,.72)!important
}
.chat-action-stream .delivery-actions{flex-wrap:wrap}
.chat-action-stream .token-quote-card{
  background:linear-gradient(145deg,rgba(14,53,87,.97),rgba(49,40,20,.94))!important
}
.chat-action-stream .token-quote-value b{color:#7ec0ff!important}
.chat-action-stream .token-quote-value span{color:#efc667!important}
.chat-action-stream .operation-handoff-viewer{
  max-height:55vh;
  overflow:auto;
  border-radius:12px
}
.chat-action-stream .operation-handoff-viewer iframe{
  display:block;
  width:100%;
  min-height:380px;
  border:0;
  border-radius:10px;
  background:#fff
}
.chat-action-stream .operation-handoff-actions{display:flex;flex-wrap:wrap;gap:7px}

.chat-starter{
  margin:0 0 12px!important;
  padding:12px!important;
  border:1px solid rgba(83,155,232,.17)!important;
  border-radius:15px!important;
  background:
    radial-gradient(circle at 100% 0,rgba(229,182,77,.10),transparent 15rem),
    rgba(8,31,56,.9)!important;
  box-shadow:none!important
}
.chat-starter-copy small{color:#4caaff!important}
.chat-starter-copy strong{color:#f2f7ff!important}
.chat-starter-copy p{margin:4px 0 0;color:#92a8c3!important;font-size:.62rem;line-height:1.65}
.chat-starter-outcome{
  margin-top:9px;
  padding:8px 10px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  border:1px solid rgba(86,152,223,.12);
  border-radius:10px;
  background:rgba(7,27,50,.62)
}
.chat-starter-outcome small{
  flex:0 0 auto;
  color:#e7bd62;
  font-size:.54rem;
  font-weight:900;
  white-space:nowrap
}
.chat-starter-outcome span{
  color:#b6c8db;
  font-size:.59rem;
  line-height:1.55
}
.chat-first-question{
  margin-top:9px;
  padding:9px 10px;
  border-inline-start:3px solid #138cff;
  border-radius:9px;
  background:linear-gradient(90deg,rgba(16,92,171,.18),rgba(10,38,68,.46))
}
html[dir="rtl"] .chat-first-question{
  border-inline-start:3px solid #138cff
}
.chat-first-question strong{
  display:block;
  color:#f1f7ff;
  font-size:.66rem;
  line-height:1.7
}
.chat-starter .chat-intake-needs{
  margin-top:9px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:5px
}
.chat-starter .chat-intake-needs>small{
  width:100%;
  margin:0 0 1px;
  color:#e8bd5c;
  font-size:.53rem;
  font-weight:900;
  letter-spacing:.05em
}
.chat-starter .chat-intake-needs>span{
  padding:5px 7px;
  border:1px solid rgba(84,153,227,.14);
  border-radius:999px;
  background:rgba(12,44,75,.62);
  color:#9fb6cf;
  font-size:.54rem;
  line-height:1.35
}
.chat-starter-examples-label{
  margin-top:10px;
  color:#8fa8c3;
  font-size:.54rem;
  font-weight:850
}
.chat-intake-context{
  margin-top:10px;
  padding:10px 0;
  display:grid;
  gap:8px;
  border-top:1px solid rgba(86,152,223,.12);
  border-bottom:1px solid rgba(86,152,223,.12)
}
.chat-intake-context>div:first-child small,
.chat-intake-needs>small{
  display:block;
  margin-bottom:4px;
  color:#e8bd5c;
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.06em
}
.chat-intake-context p{margin:0;color:#b2c4d9;font-size:.64rem;line-height:1.7}
.chat-intake-deliverable{color:#dce9f8;font-size:.62rem;line-height:1.65}
.chat-intake-needs{display:flex;flex-wrap:wrap;gap:5px}
.chat-intake-needs>small{width:100%}
.chat-intake-needs>span{
  padding:5px 7px;
  border:1px solid rgba(84,153,227,.15);
  border-radius:999px;
  background:rgba(12,44,75,.7);
  color:#9fb6cf;
  font-size:.55rem
}
.chat-starter-actions{
  margin-top:10px!important;
  display:flex!important;
  gap:7px!important;
  overflow-x:auto;
  scrollbar-width:none
}
.chat-starter-actions::-webkit-scrollbar{display:none}
.chat-starter-option,.chat-starter-custom{
  min-height:34px;
  padding:7px 10px;
  border:1px solid rgba(83,154,229,.18);
  border-radius:10px;
  background:rgba(11,42,72,.86);
  color:#e8f2ff;
  font-size:.59rem;
  font-weight:850;
  text-align:start
}
.chat-starter-option:hover,.chat-starter-option.is-selected,
.chat-starter-custom:hover,.chat-starter-custom.is-selected{
  border-color:rgba(233,185,79,.48);
  background:linear-gradient(135deg,rgba(16,57,95,.95),rgba(48,41,28,.94))
}
.chat-starter-custom{margin-top:8px;width:100%}
.chat-starter-actions.visual{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  overflow:visible!important
}
.chat-starter-card{
  min-width:0;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(83,154,229,.18);
  border-radius:13px;
  background:rgba(10,38,68,.92);
  color:#eef5ff;
  text-align:start
}
.chat-starter-card:hover,.chat-starter-card.is-selected{
  border-color:rgba(233,185,79,.52);
  background:linear-gradient(135deg,rgba(15,54,90,.96),rgba(47,40,28,.94))
}
.chat-starter-thumb{display:block;width:100%;aspect-ratio:1.6/1;overflow:hidden;background:#061a2f}
.chat-starter-thumb svg{display:block;width:100%;height:100%}
.chat-starter-card>span:last-child{display:block;padding:8px 9px}
.chat-starter-card b{
  display:block;
  overflow:hidden;
  color:#f1f6ff;
  font-size:.61rem;
  line-height:1.55;
  text-overflow:ellipsis;
  white-space:nowrap
}
.chat-starter-card small{display:block;margin-top:3px;color:#8ea6c1;font-size:.53rem}

#stage-2>.agent-composer{
  flex:0 0 auto!important;
  margin:0 12px 11px!important;
  padding:9px 10px!important;
  border:1px solid rgba(81,151,227,.22)!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,rgba(13,40,69,.98),rgba(8,29,52,.99))!important;
  box-shadow:0 10px 25px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035)!important
}
#stage-2>.agent-composer textarea{
  min-height:52px!important;
  max-height:132px;
  resize:none!important
}
#stage-2>.visitor-error{
  flex:0 0 auto;
  min-height:0;
  margin:0 14px 7px!important;
  color:#ef9a9a!important
}

@media(min-width:891px){
  body.service-os{
    --service-desktop-edge:8px;
    --service-desktop-header:58px;
    --service-desktop-top-gap:8px;
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important
  }
  body.service-os .service-topbar.public-header{
    width:calc(100% - (var(--service-desktop-edge) * 2))!important;
    max-width:none!important;
    height:var(--service-desktop-header)!important;
    margin:var(--service-desktop-top-gap) auto 0!important;
    top:var(--service-desktop-top-gap)!important
  }
  body.service-os .service-main{
    width:calc(100% - (var(--service-desktop-edge) * 2))!important;
    max-width:none!important;
    height:calc(100dvh - var(--service-desktop-header) - var(--service-desktop-top-gap) - 8px)!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:8px 0 0!important;
    overflow:hidden!important
  }
  .service-shell,.service-shell.has-selection{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    gap:10px!important;
    padding:8px!important
  }
  .service-catalog,.service-workbench,.conversation-workspace,.conversation-column{
    height:100%!important
  }
}
@media(max-width:890px){
  :root{--service-mobile-workspace-height:clamp(540px,calc(100dvh - 88px),780px)}
  .service-shell,.service-shell.has-selection{
    height:var(--service-mobile-workspace-height)!important;
    min-height:0!important;
    max-height:var(--service-mobile-workspace-height)!important;
    gap:9px!important
  }
  .service-catalog,.service-workbench,.conversation-workspace,.conversation-column{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important
  }
  .conversation-workspace{grid-template-rows:minmax(0,1fr)!important}
  .conversation-column{min-height:0!important;border-radius:18px!important}
  .chat-hero{flex-basis:150px!important;min-height:150px!important;max-height:150px!important}
}
@media(max-width:680px){
  :root{--service-mobile-workspace-height:clamp(520px,calc(100dvh - 108px),760px)}
  .service-shell,.service-shell.has-selection{
    display:block!important;
    position:relative!important;
    height:var(--service-mobile-workspace-height)!important;
    min-height:0!important
  }
  .service-workbench{width:100%!important;height:100%!important;min-height:0!important}
  .service-catalog{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important
  }
  .conversation-panel{min-height:0!important}
  .chat-hero{flex-basis:136px!important;min-height:136px!important;max-height:136px!important}
  .chat-workspace-status{
    min-height:54px;
    padding:7px 10px;
    grid-template-columns:34px minmax(0,1fr) auto
  }
  .chat-workspace-status .operation-service-icon{width:32px!important;height:32px!important}
  .chat-workspace-meta{gap:4px}
  .chat-workspace-state{max-width:92px;padding:4px 6px}
  .chat-scroll{padding:9px 10px 8px}
  .chat-starter-actions.visual{grid-template-columns:1fr!important}
  .chat-starter-thumb{aspect-ratio:2.3/1}
  .chat-action-stream .operation-choice-options,
  .chat-action-stream .package-panel{grid-template-columns:1fr!important}
  #stage-2>.agent-composer{margin:0 9px 8px!important}
  #stage-2>.visitor-error{margin:0 10px 6px!important}
}
@media(max-width:470px){
  .chat-hero{flex-basis:126px!important;min-height:126px!important;max-height:126px!important}
  .chat-workspace-status .operation-selected-pill{display:none}
  .chat-workspace-state{max-width:88px}
}


/* HIHIRO_SPECIALIST_WORKSHOP_V1
   First view stays intentionally sparse. Every service supplies its own blueprint;
   this surface only renders the next useful decision, not a generic questionnaire. */
.chat-starter[data-workshop-service]{
  padding:14px!important;
  background:
    radial-gradient(circle at 100% 0,rgba(44,139,242,.12),transparent 16rem),
    rgba(7,28,51,.94)!important
}
.chat-specialist-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.chat-specialist-head small{
  color:#55aeff;
  font-size:.53rem;
  font-weight:950;
  letter-spacing:.08em
}
.chat-specialist-head strong{
  min-width:0;
  overflow:hidden;
  color:#dceafb;
  font-size:.65rem;
  font-weight:850;
  text-overflow:ellipsis;
  white-space:nowrap
}
.chat-starter[data-workshop-service] .chat-first-question{
  margin-top:10px;
  padding:11px 12px;
  border:1px solid rgba(64,151,246,.2);
  border-inline-start:3px solid #138cff;
  background:linear-gradient(100deg,rgba(14,78,148,.22),rgba(8,31,57,.34))
}
.chat-starter[data-workshop-service] .chat-first-question strong{
  font-size:.76rem;
  line-height:1.75
}
.chat-starter[data-workshop-service] .chat-first-question span{
  display:block;
  margin-top:4px;
  color:#88a2bf;
  font-size:.56rem;
  line-height:1.6
}
.chat-starter-tool{
  width:auto;
  min-height:34px;
  margin-top:9px;
  padding:7px 10px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px dashed rgba(76,162,255,.38);
  border-radius:10px;
  background:rgba(12,48,83,.7);
  color:#cfe5fb;
  font:inherit;
  font-size:.58rem;
  font-weight:850;
  cursor:pointer
}
.chat-starter-tool span{
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:rgba(24,132,242,.18);
  color:#67b5ff;
  font-size:.9rem;
  line-height:1
}
.chat-starter-tool:hover{
  border-color:rgba(93,177,255,.65);
  background:rgba(14,57,98,.88)
}
.chat-starter[data-workshop-service] .chat-starter-examples-label{
  margin-top:11px;
  color:#7f98b5;
  font-size:.52rem
}
.chat-starter[data-workshop-service] .chat-starter-actions{
  margin-top:7px!important
}
.chat-starter[data-workshop-service] .chat-starter-option{
  flex:1 1 0;
  min-height:38px;
  padding:8px 10px;
  text-align:center;
  line-height:1.5
}
.chat-starter[data-workshop-service] .chat-starter-custom{
  min-height:32px;
  margin-top:7px;
  padding:6px 9px;
  border-color:rgba(83,154,229,.12);
  background:rgba(7,28,50,.46);
  color:#8fa8c4;
  font-weight:750
}
.chat-starter[data-workshop-service] .chat-starter-card{
  border-radius:12px
}
.chat-starter[data-workshop-service] .chat-starter-thumb{
  aspect-ratio:2/1
}
.chat-starter[data-workshop-service] .chat-starter-card>span:last-child{
  padding:7px 8px
}
.chat-starter[data-workshop-service] .chat-starter-card b{
  font-size:.59rem
}
@media(max-width:680px){
  .chat-starter[data-workshop-service]{padding:11px!important}
  .chat-specialist-head{align-items:flex-start}
  .chat-specialist-head strong{max-width:58%}
  .chat-starter[data-workshop-service] .chat-first-question strong{font-size:.72rem}
  .chat-starter[data-workshop-service] .chat-starter-actions.visual{grid-template-columns:1fr 1fr!important}
  .chat-starter[data-workshop-service] .chat-starter-thumb{aspect-ratio:1.9/1}
}
@media(max-width:470px){
  .chat-starter[data-workshop-service] .chat-starter-actions.visual{grid-template-columns:1fr!important}
  .chat-starter[data-workshop-service] .chat-starter-option{flex-basis:100%}
}


/* HIHIRO_MOBILE_CATALOG_LEFT_DRAWER_V1
   Physical mobile drawer direction is locale-independent:
   drawer enters from the left; only the toggle survives when closed. */
@media(max-width:680px){
  .service-shell .service-catalog{
    left:0!important;
    right:auto!important;
    inset-inline-start:0!important;
    inset-inline-end:auto!important;
    width:72%!important;
    border-left:0!important;
    border-right:1px solid var(--svc-line)!important;
    border-radius:0 18px 18px 0!important;
    box-shadow:18px 0 42px rgba(0,0,0,.24)!important;
    transform:translateX(calc(-100% + 46px))!important;
    transition:transform .26s ease,box-shadow .26s ease,background .18s ease!important;
    direction:ltr!important
  }
  .service-shell.mobile-catalog-open .service-catalog{
    transform:translateX(0)!important;
    background:
      radial-gradient(circle at 18% 0,rgba(12,121,247,.13),transparent 21rem),
      linear-gradient(180deg,rgba(7,27,51,.995),rgba(4,17,33,.995))!important;
    border-right-color:var(--svc-line)!important;
    box-shadow:18px 0 42px rgba(0,0,0,.24)!important;
    pointer-events:auto!important
  }
  .service-shell:not(.mobile-catalog-open) .service-catalog{
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    pointer-events:none!important
  }
  .service-shell:not(.mobile-catalog-open) .service-catalog::after{
    opacity:0!important;
    background:transparent!important
  }
  .service-shell .catalog-mobile-toggle{
    left:auto!important;
    right:4px!important;
    inset-inline-start:auto!important;
    inset-inline-end:4px!important;
    transform:none!important;
    transition:background .16s ease,border-color .16s ease!important
  }
  .service-shell.mobile-catalog-open .catalog-mobile-toggle{
    transform:none!important
  }
  .service-shell:not(.mobile-catalog-open) .catalog-mobile-toggle{
    pointer-events:auto!important
  }

  .service-shell .catalog-head{
    direction:ltr!important;
    grid-template-columns:44px minmax(0,1fr) 42px!important;
    padding:12px 8px 12px 12px!important
  }
  .service-shell .catalog-head-icon{
    grid-column:1!important;
    justify-self:start!important
  }
  .service-shell .catalog-head-copy{
    grid-column:2!important;
    min-width:0;
    text-align:center!important
  }
  html[dir="rtl"] .service-shell .catalog-head-copy{direction:rtl!important}
  html[dir="ltr"] .service-shell .catalog-head-copy{direction:ltr!important}
  .service-shell .catalog-search{
    direction:ltr!important
  }
  html[dir="rtl"] .service-shell .catalog-search input{
    direction:rtl!important;
    text-align:right!important
  }
  html[dir="ltr"] .service-shell .catalog-search input{
    direction:ltr!important;
    text-align:left!important
  }

  .service-shell .service-option{
    direction:ltr!important;
    grid-template-columns:42px minmax(0,1fr) 18px!important
  }
  .service-shell .service-option-icon{
    grid-column:1!important;
    justify-self:start!important
  }
  .service-shell .service-option-copy{
    grid-column:2!important;
    text-align:center!important
  }
  .service-shell .service-option-chevron{
    grid-column:3!important;
    justify-self:end!important;
    direction:ltr!important;
    transform:none!important
  }
}


/* HIHIRO_COMPACT_COMPOSER_V1
   One compact input surface on desktop and mobile:
   textarea above, tools + icon-only send on one fixed bottom row. */
.agent-composer{
  padding:8px 9px!important;
  border-radius:14px!important
}
.agent-composer textarea{
  width:100%!important;
  min-height:64px!important;
  max-height:120px!important;
  padding:10px 11px!important;
  resize:vertical;
  line-height:1.7!important
}
.composer-bottom{
  width:100%;
  min-height:40px;
  margin-top:6px!important;
  padding-top:6px!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex-wrap:nowrap!important;
  border-top:1px solid rgba(102,159,220,.12)!important
}
.composer-tools{
  flex:0 1 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  flex-wrap:nowrap!important
}
.composer-tool{
  flex:0 0 34px!important;
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important
}
.composer-tool svg{
  width:18px!important;
  height:18px!important
}
.composer-tool-text{
  font-size:.58rem!important;
  font-weight:900!important;
  letter-spacing:.02em
}
#chat-status{
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.56rem!important
}
.composer-bottom>#visitor-send,
#visitor-send.composer-send{
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:12px!important;
  border:1px solid rgba(97,177,255,.45)!important;
  background:linear-gradient(145deg,#1597ff,#0866db)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(4,103,230,.25)!important
}
#visitor-send.composer-send svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
#visitor-send.composer-send:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(4,103,230,.32)!important
}
#visitor-send.composer-send:active{transform:translateY(0)}
#visitor-send.composer-send:disabled{
  opacity:.48;
  cursor:not-allowed;
  transform:none;
  box-shadow:none!important
}

@media(max-width:680px){
  #stage-2>.agent-composer{
    margin:0 8px 7px!important;
    padding:7px 8px!important
  }
  .agent-composer textarea{
    min-height:56px!important;
    max-height:96px!important;
    padding:9px 10px!important;
    font-size:.74rem!important;
    resize:none
  }
  .composer-bottom{
    min-height:36px;
    gap:4px!important;
    margin-top:5px!important;
    padding-top:5px!important
  }
  .composer-tools{gap:4px!important}
  .composer-tool{
    flex-basis:31px!important;
    width:31px!important;
    min-width:31px!important;
    height:31px!important;
    min-height:31px!important;
    border-radius:9px!important
  }
  .composer-tool svg{
    width:16px!important;
    height:16px!important
  }
  .composer-tool-text{font-size:.53rem!important}
  #chat-status{display:none!important}
  .composer-bottom>#visitor-send,
  #visitor-send.composer-send{
    margin-inline-start:auto!important;
    flex-basis:34px!important;
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    border-radius:10px!important
  }
  #visitor-send.composer-send svg{
    width:17px;
    height:17px
  }
}


/* HIHIRO_MOBILE_CHAT_SPACE_V1
   Mobile conversation owns the viewport: remove the marketing hero after entering Services,
   compress the project/service chrome, and return the saved height to the message timeline. */
@media(max-width:680px){
  .conversation-column>.chat-hero{
    display:none!important;
    flex:0 0 0!important;
    min-height:0!important;
    max-height:0!important
  }

  #stage-2.conversation-panel{
    flex:1 1 100%!important;
    min-height:0!important
  }
  #stage-2 .stage-head{
    min-height:40px!important;
    padding:6px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    border-top:0!important;
    border-bottom:1px solid rgba(85,151,221,.11)!important;
    background:
      radial-gradient(circle at 100% 0,rgba(38,140,248,.10),transparent 9rem),
      rgba(6,24,45,.86)!important
  }
  #stage-2 .stage-head>div{
    min-width:0;
    display:flex;
    align-items:center;
    gap:7px
  }
  #stage-2 .stage-head small{display:none!important}
  #stage-2 .stage-head h3{
    margin:0!important;
    color:#f4f8ff!important;
    font-size:.76rem!important;
    line-height:1.2!important;
    white-space:nowrap
  }
  #stage-2 #visitor-delete{
    min-height:28px!important;
    padding:4px 8px!important;
    border:1px solid rgba(228,104,112,.18)!important;
    border-radius:9px!important;
    background:rgba(111,31,41,.14)!important;
    color:#dc7e86!important;
    font-size:.54rem!important;
    font-weight:800!important;
    line-height:1.2!important
  }
  #stage-2 #visitor-delete::before{
    content:"↻";
    margin-inline-end:4px;
    font-size:.7rem;
    vertical-align:-.03em
  }

  .chat-workspace-status{
    min-height:46px!important;
    padding:6px 9px!important;
    grid-template-columns:30px minmax(0,1fr) auto!important;
    gap:7px!important;
    border-bottom:1px solid rgba(85,151,221,.12)!important;
    background:
      radial-gradient(circle at 100% 0,rgba(229,182,77,.08),transparent 9rem),
      rgba(7,27,50,.78)!important
  }
  .chat-workspace-status .operation-service-icon{
    width:29px!important;
    height:29px!important;
    border-radius:9px!important;
    box-shadow:0 5px 14px rgba(5,102,215,.16)!important
  }
  .chat-workspace-status .operation-service-icon svg{
    width:17px!important;
    height:17px!important
  }
  .chat-workspace-service b{
    font-size:.67rem!important;
    line-height:1.25!important
  }
  .chat-workspace-service small{
    margin-top:1px!important;
    font-size:.50rem!important;
    line-height:1.2!important
  }
  .chat-workspace-meta{gap:3px!important}
  .chat-workspace-status .operation-selected-pill{display:none!important}
  .chat-workspace-state{
    max-width:82px!important;
    padding:4px 6px!important;
    font-size:.49rem!important;
    line-height:1.2!important
  }

  .chat-scroll{
    flex:1 1 0!important;
    min-height:0!important;
    padding:8px 9px 7px!important
  }
  .message-row{margin-block:5px!important}
  .message-bubble{
    max-width:88%!important;
    padding:9px 10px!important
  }

  :root{
    --service-mobile-workspace-height:clamp(560px,calc(100dvh - 90px),820px)
  }
}
@media(max-width:470px){
  #stage-2 .stage-head{min-height:38px!important;padding:5px 8px!important}
  #stage-2 .stage-head h3{font-size:.72rem!important}
  #stage-2 #visitor-delete{padding:4px 7px!important;font-size:.51rem!important}
  .chat-workspace-status{
    min-height:43px!important;
    padding:5px 8px!important;
    grid-template-columns:28px minmax(0,1fr) auto!important
  }
  .chat-workspace-status .operation-service-icon{
    width:27px!important;
    height:27px!important
  }
  .chat-workspace-state{max-width:72px!important}
}


/* HIHIRO_GITHUB_APP_CONNECT_V1 */
.composer-tool-github svg{
  width:18px!important;
  height:18px!important;
  fill:currentColor!important;
  stroke:none!important
}
.input-chip.source.github b{
  display:grid;
  place-items:center;
  width:18px;
  height:18px
}
.input-chip.source.github b svg{
  width:16px;
  height:16px;
  fill:currentColor;
  stroke:none
}
.github-connect-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:18px;
  direction:ltr
}
.github-connect-modal[hidden]{display:none!important}
.github-connect-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(2,8,17,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:default
}
.github-connect-dialog{
  position:relative;
  z-index:1;
  width:min(560px,100%);
  max-height:min(720px,calc(100dvh - 32px));
  overflow:auto;
  padding:18px;
  border:1px solid rgba(91,158,230,.28);
  border-radius:22px;
  background:
    radial-gradient(circle at 88% 0,rgba(255,202,92,.10),transparent 16rem),
    radial-gradient(circle at 12% 0,rgba(24,139,255,.15),transparent 18rem),
    linear-gradient(180deg,#0b2038,#071629);
  color:#eff6ff;
  box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);
  direction:var(--github-modal-direction,ltr)
}
html[dir="rtl"] .github-connect-dialog{--github-modal-direction:rtl}
.github-connect-head{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 34px;
  align-items:center;
  gap:11px
}
.github-connect-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:#f7f9fc;
  color:#111827
}
.github-connect-mark svg{width:25px;height:25px;fill:currentColor}
.github-connect-head small{
  display:block;
  color:#63b5ff;
  font-size:.52rem;
  font-weight:950;
  letter-spacing:.1em
}
.github-connect-head h3{
  margin:3px 0 0;
  color:#fff;
  font-size:1rem;
  line-height:1.35
}
.github-connect-close{
  width:34px;
  height:34px;
  padding:0;
  border:1px solid rgba(108,164,225,.17);
  border-radius:10px;
  background:rgba(13,44,76,.78);
  color:#a9bfd7;
  font-size:1.25rem;
  line-height:1;
  cursor:pointer
}
.github-connect-intro{
  margin:14px 1px 0;
  color:#9cb0c9;
  font-size:.68rem;
  line-height:1.8
}
.github-connect-permissions{
  margin-top:13px;
  display:grid;
  gap:7px
}
.github-connect-permissions span{
  position:relative;
  padding-inline-start:22px;
  color:#c2d4e7;
  font-size:.62rem;
  line-height:1.55
}
.github-connect-permissions span::before{
  content:"✓";
  position:absolute;
  inset-inline-start:0;
  top:.05em;
  width:16px;
  height:16px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(34,155,255,.14);
  color:#69bcff;
  font-size:.57rem;
  font-weight:950
}
.github-connect-state{
  min-height:20px;
  margin-top:12px;
  color:#8ca6c2;
  font-size:.61rem;
  line-height:1.6
}
.github-connect-state.is-connected{color:#73d4aa}
.github-connect-state.is-warning{color:#e7bd69}
.github-connect-state.is-error{color:#ef858f}
.github-connect-primary{
  width:100%;
  min-height:44px;
  margin-top:10px;
  padding:8px 13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:13px;
  background:#f5f7fb;
  color:#111827;
  font:inherit;
  font-size:.68rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.16)
}
.github-connect-primary:hover{transform:translateY(-1px)}
.github-connect-primary:disabled{opacity:.55;cursor:wait;transform:none}
.github-connect-primary svg{
  width:20px;
  height:20px;
  fill:currentColor
}
.github-repositories{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(94,156,224,.13)
}
.github-repositories[hidden]{display:none!important}
.github-repositories-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.github-repositories-head b{
  color:#eaf4ff;
  font-size:.68rem
}
.github-repositories-head small{
  min-width:22px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(36,126,221,.14);
  color:#76baff;
  font-size:.54rem;
  text-align:center
}
.github-repository-list{
  display:grid;
  gap:7px;
  margin-top:8px
}
.github-repository-card{
  min-width:0;
  padding:9px 10px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  border:1px solid rgba(96,156,221,.15);
  border-radius:12px;
  background:rgba(8,31,56,.76)
}
.github-repository-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#f4f6f8;
  color:#111827
}
.github-repository-icon svg{width:17px;height:17px;fill:currentColor}
.github-repository-copy{
  min-width:0;
  direction:ltr;
  text-align:left
}
.github-repository-copy b,
.github-repository-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.github-repository-copy b{color:#eff6ff;font-size:.63rem}
.github-repository-copy small{margin-top:2px;color:#728ba7;font-size:.49rem}
.github-repository-card button{
  min-height:30px;
  padding:5px 8px;
  border:1px solid rgba(70,155,246,.25);
  border-radius:9px;
  background:rgba(16,83,150,.35);
  color:#a9d5ff;
  font:inherit;
  font-size:.54rem;
  font-weight:850;
  white-space:nowrap;
  cursor:pointer
}
.github-repository-card button:hover{
  border-color:rgba(77,170,255,.55);
  background:rgba(19,102,185,.48)
}
.github-repository-card button:disabled{opacity:.55;cursor:wait}
.github-repositories-empty{
  margin:9px 0 0;
  padding:10px;
  border:1px dashed rgba(92,151,214,.15);
  border-radius:10px;
  color:#8299b2;
  font-size:.58rem;
  text-align:center
}
.github-connect-manual{
  width:100%;
  margin-top:10px;
  padding:7px 9px;
  border:0;
  background:transparent;
  color:#7898ba;
  font:inherit;
  font-size:.56rem;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer
}
html.github-connect-open{overflow:hidden!important}
@media(max-width:680px){
  .github-connect-modal{
    align-items:end;
    padding:0
  }
  .github-connect-dialog{
    width:100%;
    max-height:min(82dvh,720px);
    padding:15px 14px calc(15px + env(safe-area-inset-bottom));
    border-width:1px 0 0;
    border-radius:20px 20px 0 0
  }
  .github-connect-head{
    grid-template-columns:40px minmax(0,1fr) 32px;
    gap:9px
  }
  .github-connect-mark{width:38px;height:38px;border-radius:11px}
  .github-connect-mark svg{width:22px;height:22px}
  .github-connect-intro{font-size:.64rem}
  .github-repository-card{
    grid-template-columns:28px minmax(0,1fr);
    gap:7px
  }
  .github-repository-card button{
    grid-column:1/-1;
    width:100%;
    min-height:32px
  }
}


/* HIHIRO_DESKTOP_CHAT_SPACE_V1
   Laptop/desktop workspace prioritizes conversation:
   narrower fixed catalog column, no marketing hero, full-height chat. */
@media(min-width:891px){
  .service-shell,
  .service-shell.has-selection{
    grid-template-columns:minmax(225px,250px) minmax(0,1fr)!important
  }
  .service-catalog{
    min-width:0!important;
    max-width:250px!important
  }
  .conversation-column>.chat-hero{
    display:none!important;
    flex:0 0 0!important;
    min-height:0!important;
    max-height:0!important
  }
  #stage-2.conversation-panel{
    flex:1 1 100%!important;
    min-height:0!important
  }
  #stage-2 .stage-head{
    min-height:44px!important;
    padding:8px 12px!important
  }
  .chat-workspace-status{
    min-height:48px!important;
    padding:7px 10px!important
  }
  .chat-scroll{
    flex:1 1 0!important;
    min-height:0!important;
    padding:10px 12px 8px!important
  }
}


/* HIHIRO_DESKTOP_SERVICE_ROW_ICONS_V1
   Desktop physical row order is locale-independent:
   icon left, localized copy centered, chevron right. */
@media(min-width:891px){
  .service-catalog .service-option{
    display:grid!important;
    grid-template-columns:36px minmax(0,1fr) 16px!important;
    align-items:center!important;
    gap:5px!important;
    min-height:50px!important;
    padding:6px 7px!important;
    direction:ltr!important
  }
  .service-catalog .service-option-icon{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    grid-column:1!important;
    justify-self:start!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    border-radius:9px!important
  }
  .service-catalog .service-option-icon svg{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:19px!important;
    height:19px!important
  }
  .service-catalog .service-option-copy{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    grid-column:2!important;
    min-width:0!important;
    text-align:center!important
  }
  html[dir="rtl"] .service-catalog .service-option-copy{direction:rtl!important}
  html[dir="ltr"] .service-catalog .service-option-copy{direction:ltr!important}
  .service-catalog .service-option-copy b{font-size:.68rem!important}
  .service-catalog .service-option-copy small{font-size:.52rem!important}
  .service-catalog .service-option-chevron{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    grid-column:3!important;
    justify-self:end!important;
    width:16px!important;
    min-width:16px!important;
    color:#9fb8d3!important;
    font-size:1.25rem!important;
    line-height:1!important;
    text-align:center!important;
    direction:ltr!important;
    transform:none!important
  }
}


/* HIHIRO_DESKTOP_PAGE_SCROLL_V1
   Desktop keeps local catalog/chat scrolling but must never lock the document itself. */
@media(min-width:891px){
  html{
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important
  }
  body.service-os{
    height:auto!important;
    min-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important
  }
  body.service-os .service-main{
    flex:0 0 auto!important
  }
}


/* HIHIRO_SINGLE_SCREEN_WORKSHOP_V1
   Services is an application workspace, not a landing page:
   header + one Workshop, viewport-locked, with scrolling only inside catalog/chat/modal surfaces. */
html{
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important
}
body.service-os{
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important
}
body.service-os .service-topbar.public-header{
  position:relative!important;
  top:auto!important;
  flex:0 0 auto!important
}
body.service-os .service-main{
  flex:1 1 0!important;
  width:calc(100% - 16px)!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 auto!important;
  padding:8px 0!important;
  overflow:hidden!important
}
body.service-os .service-main>.service-shell,
body.service-os .service-main>.service-shell.has-selection{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  margin:0!important;
  overflow:hidden!important
}
body.service-os .service-catalog,
body.service-os .service-workbench,
body.service-os .workbench-body,
body.service-os .stage-area,
body.service-os .conversation-workspace,
body.service-os .conversation-column{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important
}
body.service-os .service-catalog,
body.service-os .service-workbench,
body.service-os .conversation-workspace,
body.service-os .conversation-column,
body.service-os #stage-2.conversation-panel{
  overflow:hidden!important
}
body.service-os .service-tree,
body.service-os .chat-scroll{
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain
}
body.service-os #stage-2>.agent-composer{
  flex:0 0 auto!important
}

/* Explicitly retire the former document-scroll model. */
@media(min-width:891px){
  body.service-os{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important
  }
  body.service-os .service-main{
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important
  }
  body.service-os .service-shell,
  body.service-os .service-shell.has-selection{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important
  }
}
@media(max-width:890px){
  body.service-os .service-main{
    width:calc(100% - 8px)!important;
    padding:6px 0!important
  }
  body.service-os .service-shell,
  body.service-os .service-shell.has-selection{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important
  }
  body.service-os .service-workbench,
  body.service-os .conversation-workspace,
  body.service-os .conversation-column{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important
  }
}
@media(max-width:680px){
  body.service-os .service-shell,
  body.service-os .service-shell.has-selection{
    position:relative!important;
    display:block!important
  }
  body.service-os .service-catalog{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important
  }
}


/* HIHIRO_MOBILE_SINGLE_WORKSHOP_V2
   Mobile Services is one viewport-fitted Workshop.
   Chat is the primary surface; catalog is a true physical-left overlay drawer.
   Locale never mirrors icon/text/chevron geometry. */
@media(max-width:680px){
  body.service-os .service-main{
    width:calc(100% - 8px)!important;
    padding:4px 0 6px!important
  }

  body.service-os .service-shell,
  body.service-os .service-shell.has-selection{
    position:relative!important;
    display:block!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:18px!important;
    background:
      radial-gradient(circle at 12% 0,rgba(18,117,230,.11),transparent 18rem),
      linear-gradient(180deg,rgba(6,24,45,.98),rgba(4,16,31,.99))!important;
    box-shadow:0 14px 36px rgba(0,0,0,.24)!important
  }

  body.service-os .service-workbench,
  body.service-os .workbench-body,
  body.service-os .stage-area,
  body.service-os .conversation-workspace,
  body.service-os .conversation-column{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important
  }

  body.service-os .conversation-column{
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:
      radial-gradient(circle at 82% 0,rgba(17,108,211,.08),transparent 17rem),
      linear-gradient(180deg,rgba(7,27,50,.96),rgba(4,17,33,.98))!important
  }

  /* True left drawer: fully off-canvas when closed; only its toggle remains visible. */
  body.service-os .service-shell .service-catalog{
    position:absolute!important;
    inset:0 auto 0 0!important;
    z-index:45!important;
    width:min(84%,330px)!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:visible!important;
    border:0!important;
    border-right:1px solid rgba(82,151,229,.24)!important;
    border-radius:0 17px 17px 0!important;
    background:
      radial-gradient(circle at 18% 0,rgba(15,126,248,.15),transparent 19rem),
      linear-gradient(180deg,rgba(7,28,53,.998),rgba(3,15,29,.998))!important;
    box-shadow:16px 0 34px rgba(0,0,0,.30)!important;
    transform:translateX(-100%)!important;
    transition:transform .24s ease,box-shadow .2s ease!important;
    direction:ltr!important;
    pointer-events:none!important
  }
  body.service-os .service-shell.mobile-catalog-open .service-catalog{
    transform:translateX(0)!important;
    pointer-events:auto!important
  }
  body.service-os .service-shell:not(.mobile-catalog-open) .service-catalog{
    background:
      radial-gradient(circle at 18% 0,rgba(15,126,248,.15),transparent 19rem),
      linear-gradient(180deg,rgba(7,28,53,.998),rgba(3,15,29,.998))!important;
    border-right-color:rgba(82,151,229,.24)!important;
    box-shadow:none!important
  }

  /* The toggle rides with the drawer: left edge when closed, drawer edge when open. */
  body.service-os .service-shell .catalog-mobile-toggle{
    position:absolute!important;
    top:10px!important;
    left:auto!important;
    right:-42px!important;
    inset-inline-start:auto!important;
    inset-inline-end:-42px!important;
    z-index:60!important;
    width:36px!important;
    height:36px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(105,165,225,.28)!important;
    border-radius:11px!important;
    background:rgba(247,250,254,.98)!important;
    color:#637991!important;
    box-shadow:0 7px 18px rgba(0,0,0,.18)!important;
    font-size:1.25rem!important;
    line-height:1!important;
    transform:none!important;
    pointer-events:auto!important
  }
  body.service-os .service-shell.mobile-catalog-open .catalog-mobile-toggle,
  body.service-os .service-shell:not(.mobile-catalog-open) .catalog-mobile-toggle{
    transform:none!important
  }

  body.service-os .service-shell .catalog-head{
    flex:0 0 auto!important;
    min-height:64px!important;
    padding:9px 10px!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) 30px!important;
    align-items:center!important;
    gap:6px!important;
    direction:ltr!important;
    border-bottom:1px solid rgba(87,151,219,.14)!important
  }
  body.service-os .service-shell .catalog-head-icon{
    grid-column:1!important;
    justify-self:start!important;
    width:36px!important;
    height:36px!important;
    border-radius:11px!important
  }
  body.service-os .service-shell .catalog-head-copy{
    grid-column:2!important;
    min-width:0!important;
    text-align:center!important
  }
  body.service-os .service-shell .catalog-head-copy b{
    font-size:.78rem!important;
    line-height:1.25!important
  }
  body.service-os .service-shell .catalog-head-copy span{
    margin-top:2px!important;
    font-size:.52rem!important;
    line-height:1.45!important
  }
  html[dir="rtl"] body.service-os .service-shell .catalog-head-copy{direction:rtl!important}
  html[dir="ltr"] body.service-os .service-shell .catalog-head-copy{direction:ltr!important}

  body.service-os .service-shell .catalog-reset{
    grid-column:3!important;
    justify-self:end!important;
    width:28px!important;
    height:28px!important;
    border-radius:9px!important
  }

  body.service-os .service-shell .catalog-search{
    flex:0 0 auto!important;
    min-height:42px!important;
    margin:8px 9px 7px!important;
    padding:0 10px!important;
    display:grid!important;
    grid-template-columns:20px minmax(0,1fr)!important;
    align-items:center!important;
    gap:7px!important;
    border-radius:12px!important;
    direction:ltr!important
  }
  body.service-os .service-shell .catalog-search svg{
    width:18px!important;
    height:18px!important
  }
  body.service-os .service-shell .catalog-search input{
    min-width:0!important;
    font-size:.64rem!important
  }
  html[dir="rtl"] body.service-os .service-shell .catalog-search input{
    direction:rtl!important;
    text-align:right!important
  }
  html[dir="ltr"] body.service-os .service-shell .catalog-search input{
    direction:ltr!important;
    text-align:left!important
  }

  body.service-os .service-shell .service-tree{
    flex:1 1 0!important;
    min-height:0!important;
    max-height:none!important;
    padding:0 8px 9px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    scrollbar-gutter:auto!important;
    overscroll-behavior:contain!important
  }
  body.service-os .service-shell .service-group{
    padding:4px 0 5px!important
  }
  body.service-os .service-shell .service-group-title{
    min-height:22px!important;
    padding:3px 7px 4px!important;
    text-align:center!important
  }
  body.service-os .service-shell .service-group-title b{
    font-size:.57rem!important;
    letter-spacing:.01em!important
  }

  /* Physical geometry is identical in all nine languages. */
  body.service-os .service-shell .service-option{
    min-height:54px!important;
    margin:0 0 6px!important;
    padding:6px 7px!important;
    display:grid!important;
    grid-template-columns:36px minmax(0,1fr) 14px!important;
    align-items:center!important;
    gap:6px!important;
    border-radius:13px!important;
    direction:ltr!important
  }
  body.service-os .service-shell .service-option-icon{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    grid-column:1!important;
    justify-self:start!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    border-radius:10px!important
  }
  body.service-os .service-shell .service-option-icon svg{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:19px!important;
    height:19px!important
  }
  body.service-os .service-shell .service-option-copy{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    grid-column:2!important;
    min-width:0!important;
    text-align:center!important
  }
  html[dir="rtl"] body.service-os .service-shell .service-option-copy{direction:rtl!important}
  html[dir="ltr"] body.service-os .service-shell .service-option-copy{direction:ltr!important}
  body.service-os .service-shell .service-option-copy b{
    font-size:.70rem!important;
    line-height:1.25!important
  }
  body.service-os .service-shell .service-option-copy small{
    margin-top:2px!important;
    font-size:.50rem!important;
    line-height:1.2!important
  }
  body.service-os .service-shell .service-option-chevron{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    grid-column:3!important;
    justify-self:end!important;
    width:14px!important;
    min-width:14px!important;
    color:#9db7d2!important;
    font-size:1.2rem!important;
    line-height:1!important;
    text-align:center!important;
    direction:ltr!important;
    transform:none!important
  }

  /* Conversation always owns the full Workshop behind the drawer. */
  body.service-os #stage-2.conversation-panel{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important
  }
  body.service-os .chat-scroll{
    flex:1 1 0!important;
    min-height:0!important;
    overflow-y:auto!important
  }
  body.service-os #stage-2>.agent-composer{
    flex:0 0 auto!important;
    margin:0 6px 6px!important
  }
}

@media(max-width:390px){
  body.service-os .service-shell .service-catalog{
    width:min(86%,318px)!important
  }
  body.service-os .service-shell .service-option{
    grid-template-columns:34px minmax(0,1fr) 13px!important;
    min-height:52px!important;
    gap:5px!important
  }
}


/* Simple adaptive service intake — 2026-09-30
   First view is intentionally quiet: one broad request, then Hiro drives adaptive discovery. */
.chat-starter.is-simple-intake,
.chat-starter[data-workshop-service].is-simple-intake{
  padding:8px 3px 7px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.chat-simple-intake-copy{
  display:grid;
  gap:5px;
  max-width:690px;
}
.chat-simple-intake-copy strong{
  color:#162a44;
  font-size:.84rem;
  font-weight:850;
  line-height:1.65;
}
.chat-simple-intake-copy span{
  color:#6e8198;
  font-size:.67rem;
  font-weight:600;
  line-height:1.7;
}
html[dir="rtl"] .chat-simple-intake-copy{
  text-align:right;
}
@media(max-width:600px){
  .chat-starter.is-simple-intake,
  .chat-starter[data-workshop-service].is-simple-intake{
    padding:6px 1px 5px!important;
  }
  .chat-simple-intake-copy strong{
    font-size:.78rem;
  }
  .chat-simple-intake-copy span{
    font-size:.63rem;
  }
}


/* Conversation readability + sender avatars — 2026-09-30
   Keep the first intake intentionally minimal, but make the primary question unmistakable. */
.chat-starter.is-simple-intake,
.chat-starter[data-workshop-service].is-simple-intake,
.chat-starter.is-simple-intake::before,
.chat-starter.is-simple-intake::after{
  border:0!important;
  box-shadow:none!important;
}
.chat-starter.is-simple-intake::before,
.chat-starter.is-simple-intake::after{
  content:none!important;
  display:none!important;
}
.chat-simple-intake-copy{
  padding:3px 1px 8px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.chat-simple-intake-copy strong{
  color:#f3f8ff!important;
  font-size:.9rem!important;
  font-weight:900!important;
  line-height:1.7!important;
  letter-spacing:-.01em;
  text-decoration:none!important;
  border:0!important;
  text-shadow:0 1px 14px rgba(84,169,255,.12);
}
.chat-simple-intake-copy strong::before,
.chat-simple-intake-copy strong::after{
  content:none!important;
  display:none!important;
}
.chat-simple-intake-copy span{
  color:#9eb5cf!important;
  font-size:.67rem!important;
  font-weight:650!important;
  line-height:1.8!important;
}

/* Every conversation turn carries an explicit sender identity.
   The customer image comes from the authenticated user's safe avatar metadata when present. */
.message-row{
  width:100%;
  align-items:flex-end!important;
  gap:7px!important;
  direction:ltr!important;
}
html[dir="ltr"] .message-row.assistant,
html[dir="rtl"] .message-row.customer{
  flex-direction:row!important;
  justify-content:flex-start!important;
}
html[dir="ltr"] .message-row.customer,
html[dir="rtl"] .message-row.assistant{
  flex-direction:row-reverse!important;
  justify-content:flex-start!important;
}
.message-row .message-bubble{
  max-width:min(700px,calc(100% - 42px))!important;
}
.message-avatar{
  position:relative;
  flex:0 0 31px;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:10px;
  user-select:none;
}
.message-avatar-hiro{
  border:1px solid rgba(235,188,84,.48);
  background:linear-gradient(145deg,rgba(255,225,146,.18),rgba(110,72,18,.18));
  box-shadow:0 5px 14px rgba(0,0,0,.2),0 0 0 1px rgba(255,220,125,.07) inset;
}
.message-avatar-hiro img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.message-avatar-customer{
  border:1px solid rgba(94,163,235,.3);
  background:linear-gradient(145deg,rgba(20,67,111,.98),rgba(8,31,57,.98));
  color:#bcd9f7;
  box-shadow:0 5px 14px rgba(0,0,0,.16),0 0 0 1px rgba(255,255,255,.025) inset;
}
.message-avatar-photo{
  position:absolute;
  width:31px;
  height:31px;
  border-radius:9px;
  object-fit:cover;
}
.message-avatar-fallback{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
}
.message-avatar-fallback svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.message-avatar.has-photo .message-avatar-fallback{
  visibility:hidden;
}
@media(max-width:600px){
  .chat-simple-intake-copy strong{
    font-size:.84rem!important;
  }
  .chat-simple-intake-copy span{
    font-size:.64rem!important;
  }
  .message-row{
    gap:6px!important;
  }
  .message-avatar{
    flex-basis:28px;
    width:28px;
    height:28px;
    border-radius:9px;
  }
  .message-avatar-photo{
    width:28px;
    height:28px;
    border-radius:8px;
  }
  .message-avatar-fallback svg{
    width:17px;
    height:17px;
  }
  .message-row .message-bubble{
    max-width:calc(100% - 34px)!important;
  }
}