/* HiHiro V10 Owner QA: premium desktop composer dock and single Projects heading.
 * Scope: desktop widths only, CSS-only, no runtime, billing, project or mobile mutation.
 * This file loads after desktop-unified-workspace-v10.css and light-contrast-v10.css. */
@media (min-width:891px) {
  html[data-theme="light"] body.service-os {
    --dock-bg:#e8f1fa;
    --dock-glow:rgba(64,135,199,.09);
    --dock-line:#b3ccdf;
    --dock-card:#fff;
    --dock-card-ring:#6d9bc2;
    --dock-shadow:0 3px 14px rgba(20,62,105,.10);
    --dock-text:#173652;
    --dock-placeholder:#486681;
    --dock-icon-bg:#f4f9ff;
    --dock-icon-border:#b8cfe2;
    --dock-icon:#244c6e;
    --dock-badge-bg:#d9e9f6;
    --dock-link-bg:#f7fbff;
    --dock-link-border:#9fc3e0;
    --dock-link:#17436b;
  }
  html[data-theme="dark"] body.service-os {
    --dock-bg:#0c2742;
    --dock-glow:rgba(58,137,210,.12);
    --dock-line:#345575;
    --dock-card:#142f4d;
    --dock-card-ring:#70a5d1;
    --dock-shadow:0 5px 16px rgba(0,6,17,.23);
    --dock-text:#f0f6ff;
    --dock-placeholder:#aec7df;
    --dock-icon-bg:#193c5e;
    --dock-icon-border:#43688a;
    --dock-icon:#d8eaff;
    --dock-badge-bg:#244966;
    --dock-link-bg:#143856;
    --dock-link-border:#507fa5;
    --dock-link:#e6f3ff;
  }
  /* All three pane footers share one subtle material and matched seam. */
  body.service-os #service-shell > .service-catalog > .desktop-service-pane-footer,
  body.service-os #service-shell #stage-2 > .agent-composer,
  body.service-os #service-shell .service-project-pane > .service-project-new {
    background:radial-gradient(ellipse 95% 90% at 50% 0%,var(--dock-glow),transparent 85%),
      var(--dock-bg)!important;
    border-top:1px solid var(--dock-line)!important;
  }
  /* Services: a quiet branded endcap, not an oversized empty placeholder. */
  body.service-os #service-shell > .service-catalog > .desktop-service-pane-footer {
    display:flex!important;
    flex-flow:column nowrap;
    align-items:center;
    justify-content:center;
    gap:6px;
    position:relative;
    color:var(--dock-placeholder);
  }
  body.service-os #service-shell > .service-catalog > .desktop-service-pane-footer::before {
    content:"Hi";
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:11px;
    border:1px solid var(--dock-line);
    background:var(--dock-card);
    color:#c39335;
    font:850 15px/1 system-ui,sans-serif;
    box-shadow:var(--dock-shadow);
  }
  body.service-os #service-shell > .service-catalog > .desktop-service-pane-footer::after {
    content:"Smart Life by Hiro";
    font:600 10px/1.5 system-ui,sans-serif;
    letter-spacing:.025em;
    color:var(--dock-placeholder);
  }
  /* The message input should be the dominant, highly legible dock surface. */
  body.service-os #service-shell #stage-2 > .agent-composer {
    height:var(--unified-bottom-h)!important;
    min-height:var(--unified-bottom-h)!important;
    max-height:var(--unified-bottom-h)!important;
    box-sizing:border-box!important;
    padding:9px 12px 6px!important;
    gap:0!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }
  body.service-os #service-shell #stage-2 > .agent-composer #visitor-message {
    flex:0 0 56px!important;
    display:block!important;
    width:100%!important;
    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;
    padding:10px 12px!important;
    box-sizing:border-box!important;
    border:2px solid var(--dock-card-ring)!important;
    border-radius:12px!important;
    background:var(--dock-card)!important;
    color:var(--dock-text)!important;
    box-shadow:var(--dock-shadow),inset 0 1px 0 rgba(255,255,255,.06)!important;
    font-size:clamp(12px,.9vw,14px)!important;
    line-height:1.6!important;
    resize:none!important;
    outline:none!important;
    transition:border-color .16s ease,box-shadow .16s ease;
  }
  body.service-os #service-shell #stage-2 > .agent-composer #visitor-message::placeholder {
    color:var(--dock-placeholder)!important;
    opacity:1!important;
  }
  body.service-os #service-shell #stage-2 > .agent-composer #visitor-message:focus-visible {
    border-color:#2286d5!important;
    outline:2px solid #2286d5!important;
    outline-offset:1px!important;
    box-shadow:0 0 0 4px rgba(43,139,211,.16)!important;
  }
  body.service-os #service-shell #stage-2 > .agent-composer .composer-bottom {
    flex:0 0 38px!important;
    width:100%!important;
    min-height:38px!important;
    height:38px!important;
    max-height:38px!important;
    margin-top:4px!important;
    padding:2px 1px!important;
    border-top:0!important;
    background:transparent!important;
    align-items:center!important;
    justify-content:space-between!important;
    overflow:visible!important;
  }
  body.service-os #service-shell #stage-2 > .agent-composer .composer-tools {
    display:flex!important;
    gap:5px!important;
    align-items:center!important;
    overflow:visible!important;
  }
  body.service-os #service-shell #stage-2 > .agent-composer .composer-tool:not([hidden]) {
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    flex:0 0 32px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    color:var(--dock-icon)!important;
    background:var(--dock-icon-bg)!important;
    border:1px solid var(--dock-icon-border)!important;
    border-radius:10px!important;
    box-shadow:0 1px 4px rgba(5,29,49,.06)!important;
    opacity:1!important;
  }
  body.service-os #service-shell #stage-2 > .agent-composer .composer-tool[hidden] {
    display:none!important;
  }
  body.service-os #service-shell #stage-2 > .agent-composer .composer-tool:hover:not(:disabled) {
    border-color:#4199d4!important;
    filter:brightness(1.05);
  }
  body.service-os #service-shell #stage-2 > .agent-composer #visitor-send {
    flex:0 0 36px!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid #67baff!important;
    border-radius:11px!important;
    background:linear-gradient(145deg,#229ffd,#086edc)!important;
    color:#fff!important;
    box-shadow:0 3px 9px rgba(0,104,221,.24)!important;
  }
  body.service-os #service-shell #stage-2 > .agent-composer #visitor-send:disabled {
    opacity:.58!important;
    box-shadow:none!important;
  }
  body.service-os #service-shell #stage-2 > .agent-composer #chat-status {
    color:var(--dock-placeholder)!important;
    opacity:1!important;
  }
  /* Project panel has exactly one visible title in the structural header.
     Filters remain functional buttons; grouped service labels stay intact. */
  body.service-os #service-shell .service-project-pane > .service-project-tree-heading {
    display:none!important;
  }
  body.service-os #service-shell .service-project-pane > .service-project-header > div {
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:9px!important;
    min-width:0!important;
  }
  body.service-os #service-shell .service-project-pane #service-project-name {
    font-size:.85rem!important;
    line-height:1.3!important;
    font-weight:800!important;
    color:var(--unified-ink)!important;
  }
  body.service-os #service-shell .service-project-pane #service-project-count {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:23px!important;
    padding:2px 7px!important;
    font-size:.64rem!important;
    border:1px solid var(--dock-line)!important;
    border-radius:8px!important;
    background:var(--dock-badge-bg)!important;
    color:var(--dock-text)!important;
  }
  body.service-os #service-shell .service-project-pane .service-project-filters {
    display:flex!important;
    gap:6px!important;
    flex:0 0 auto!important;
    padding:10px 10px 7px!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
  }
  body.service-os #service-shell .service-project-pane .service-project-filter {
    flex:1 1 auto!important;
    padding:7px 9px!important;
    min-width:0!important;
    font-size:.67rem!important;
    font-weight:700!important;
    border:1px solid var(--dock-line)!important;
    border-radius:9px!important;
    color:var(--dock-text)!important;
    background:var(--dock-card)!important;
  }
  body.service-os #service-shell .service-project-pane .service-project-filter.is-active {
    background:var(--dock-badge-bg)!important;
    border-color:var(--dock-card-ring)!important;
    color:var(--dock-link)!important;
  }
  body.service-os #service-shell .service-project-pane .service-project-filter:focus-visible{
    outline:2px solid var(--unified-focus)!important;
    outline-offset:2px!important;
  }
  /* Project CTA occupies its exact 118px footer area but has a deliberate
     elevated actionable pill rather than tiny text in a mostly empty slab. */
  body.service-os #service-shell .service-project-pane > .service-project-new {
    gap:8px!important;
    direction:rtl!important;
    color:var(--dock-link)!important;
    font-weight:750!important;
    text-decoration:none!important;
    position:relative!important;
    isolation:isolate;
    padding:14px 13px!important;
    background:radial-gradient(ellipse at 50% 0%,var(--dock-glow),transparent 90%),var(--dock-bg)!important;
  }
  body.service-os #service-shell .service-project-pane > .service-project-new::before {
    content:"";
    position:absolute;
    inset:17px 12px;
    background:var(--dock-link-bg);
    border:1px solid var(--dock-link-border);
    border-radius:14px;
    box-shadow:var(--dock-shadow);
    z-index:-1;
    pointer-events:none;
  }
  body.service-os #service-shell .service-project-pane > .service-project-new:hover::before {
    border-color:#3999dc;
  }
  body.service-os #service-shell .service-project-pane > .service-project-new span {
    color:var(--dock-link)!important;
    font-size:.75rem!important;
    font-weight:750!important;
    max-width:22ch;
    text-align:center!important;
    line-height:1.55!important;
  }
  @media (prefers-reduced-motion:reduce) {
    body.service-os #service-shell #stage-2 > .agent-composer #visitor-message {transition:none!important;}
  }
}