.platform-home { grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); }
:root {
  --ui-focus: #f1d269;
  --ui-control-height: 44px;
  --ui-radius-sm: 7px;
  --ui-radius-md: 10px;
}
.tile-agent {
  min-height: 132px; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(145deg, rgba(23,195,178,.2), rgba(79,172,254,.08));
  border-color: rgba(84,225,204,.36);
}
.tile-agent:hover { border-color: #54e1cc; box-shadow: 0 10px 28px rgba(36,211,186,.2); }
.tile-agent .tile-icon { color: #72f0d8; }
.tile-agent .tile-desc { line-height: 1.5; }
.app-tile { width: 100%; color: inherit; font: inherit; }
.app-tile:focus-visible, .ws-tab:focus-visible, .ws-model-trigger:focus-visible,
.ws-model-item:focus-visible, .ap-select:focus-visible, .ap-runtime:focus-visible,
.ap-scaffold:focus-visible, .ap-close:focus-visible, .ap-primary:focus-visible {
  outline: 2px solid #72f0d8; outline-offset: 2px;
}

.ap-config-btn { white-space: nowrap; }
.ws-runtime-layer { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.ws-layer-label { color: rgba(255,255,255,.48); font-size: 10.5px; white-space: nowrap; letter-spacing: .2px; }
.ws-runtime-layer .ws-tabs { flex: 1 1 auto; max-width: none; min-width: 0; overflow-x: auto; scrollbar-width: thin; gap: 4px; padding: 2px; }
.ws-runtime-layer .ws-tab {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 4px 8px;
  border-radius: 16px; white-space: nowrap;
}
.ws-runtime-layer .ws-tab.active {
  background: rgba(84,225,204,.15); color: #a7f4e6; box-shadow: inset 0 0 0 1px rgba(84,225,204,.3);
}
.ws-runtime-layer .ws-tab:disabled { opacity: .42; cursor: not-allowed; color: rgba(255,255,255,.42); }
.ws-runtime-layer .ws-tab:disabled:hover { color: rgba(255,255,255,.42); }
.ws-runtime-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff8a85; flex: 0 0 auto; }
.ws-runtime-dot.ready { background: #67ddb7; box-shadow: 0 0 0 3px rgba(103,221,183,.12); }
.ws-runtime-dot.error { background: #ffbd66; }
.ws-runtime-empty { color: rgba(255,255,255,.43); font-size: 11px; padding: 6px 9px; white-space: nowrap; }
.ap-provider-badge {
  border: 1px solid rgba(84,225,204,.28); background: rgba(84,225,204,.08); color: #88ead9;
  display: inline-flex; align-items: center; min-height: 28px; border-radius: 14px; padding: 3px 8px;
  font-size: 10.5px; white-space: nowrap;
}
.ap-reason-wrap { display: flex !important; align-items: center; gap: 6px; white-space: nowrap; }
.ap-reason-wrap[style*="display:none"], .ap-reason-wrap[style*="display: none"] { display: none !important; }
.ap-select, .ap-field select {
  background: #16202e; border: 1px solid rgba(255,255,255,.14); color: #fff;
  border-radius: 7px; padding: 6px 9px; font: inherit; outline: none;
}
.ap-reason-wrap .ap-select { min-height: 28px; border-radius: 14px; padding: 3px 8px; }
.ap-select:focus, .ap-field select:focus, .ap-field input:focus { border-color: #54e1cc; }

/* Paseo's native work surface keeps the timeline and composer on one
   820px reading rail, while preserving this portal's existing color system. */
#wsCard .ws-chat { align-items: center; gap: 12px; }
#wsCard .ws-topbar > div[style*="flex:1"] { display: none; }
#wsCard .ws-chat > .ws-msg {
  align-self: center; width: min(94%, 820px); max-width: 820px; box-sizing: border-box;
}
#wsCard .ws-chat > .ws-msg.user { align-items: flex-end; }
#wsCard .ws-msg.user .ws-bubble {
  border-radius: 16px 2px 16px 16px; padding: 12px 16px;
}
#wsCard .ws-msg.assistant .ws-bubble {
  background: transparent; border-color: transparent; padding: 12px 8px;
}
#wsCard .ws-msg.tool .ws-bubble {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  border-left: 2px solid rgba(84,225,204,.6); border-radius: 8px; padding: 10px 12px;
  color: rgba(255,255,255,.7); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.55;
}
#wsCard .ws-msg.error .ws-bubble {
  background: rgba(255,138,133,.08); border: 1px solid rgba(255,138,133,.26);
  border-radius: 8px; color: #ffc0bc; padding: 10px 12px;
}
/* Paseo's desktop content rail is 820px; keep controls and timeline aligned. */
#wsCard .ws-modelbar, #wsCard .ws-inputbar, #wsCard .ws-status {
  width: min(100%, 820px); margin-inline: auto; box-sizing: border-box;
}
.ws-cancel-run {
  width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center;
  border: 1px solid rgba(255,138,133,.4); border-radius: 7px; background: rgba(255,138,133,.1);
  color: #ffc0bc; font-size: 14px; line-height: 1; cursor: pointer;
}
.ws-cancel-run:hover { background: rgba(255,138,133,.18); border-color: rgba(255,138,133,.68); }
.ws-cancel-run:disabled { opacity: .5; cursor: not-allowed; }
.ws-cancel-run:focus-visible { outline: 2px solid #ff8a85; outline-offset: 2px; }
#wsCard .ws-modelbar { gap: 6px; }
#wsCard .ws-model-trigger {
  min-height: 28px; border-radius: 14px; padding: 3px 8px; font-size: 12.5px;
}
#wsCard .ws-model-picker { width: 360px; max-height: 400px; border-radius: 8px; }
#wsCard .ws-model-picker input { min-height: 33px; box-sizing: border-box; }
#wsCard .ws-model-list { max-height: 356px; }
#wsCard .ws-model-item { min-height: 36px; padding: 8px 12px; box-sizing: border-box; }

.ap-overlay {
  position: fixed; inset: 0; z-index: 90; display: none; justify-content: flex-end;
  background: rgba(3,8,15,.64); backdrop-filter: blur(4px);
}
.ap-overlay.open { display: flex; }
.ap-drawer {
  width: min(470px, 100%); height: 100%; overflow-y: auto; background: #111b28;
  border-left: 1px solid rgba(255,255,255,.12); box-shadow: -16px 0 46px rgba(0,0,0,.42);
  padding: 19px 20px 28px;
}
.ap-drawer-head { position: sticky; top: -19px; z-index: 2; background: rgba(17,27,40,.96); padding: 19px 0 13px; display: flex; align-items: flex-start; gap: 12px; }
.ap-drawer-head > div { flex: 1; min-width: 0; }
.ap-drawer h2 { font-size: 17px; letter-spacing: 0; }
.ap-drawer-sub { margin-top: 5px; color: rgba(255,255,255,.5); font-size: 11.5px; line-height: 1.5; }
.ap-close {
  width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.13); border-radius: 7px;
  background: rgba(255,255,255,.07); color: #fff; font-size: 19px; cursor: pointer;
}

/* Shared portal interaction contract: compact workspace controls retain their
   visual density, but the hit area remains usable on touch screens. */
#wsCard .btn-icon, #wsCard .small-btn, #wsCard .ws-model-trigger,
#wsCard .ws-send, #wsCard .ws-cancel-run, .ap-config-btn, .ap-close {
  min-height: var(--ui-control-height);
}
#wsCard .ws-path-add > .small-btn { min-width:44px; }
#wsCard .ws-sess-head .small-btn { padding-inline:12px; }
:where(#wsCard a,#wsCard button,#wsCard input,#wsCard textarea,#wsCard select,[tabindex]):focus-visible {
  outline:2px solid var(--ui-focus); outline-offset:3px;
}
.ap-section { padding: 15px 0; border-top: 1px solid rgba(255,255,255,.09); }
.ap-section-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.82); margin-bottom: 9px; }
.ap-runtime-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-runtime {
  min-height: 74px; text-align: left; border: 1px solid rgba(255,255,255,.13); border-radius: 8px;
  background: rgba(255,255,255,.045); color: #fff; padding: 10px; cursor: pointer;
}
.ap-runtime:hover { border-color: rgba(84,225,204,.56); }
.ap-runtime.active { border-color: #54e1cc; background: rgba(84,225,204,.1); }
.ap-runtime:disabled { opacity: .5; cursor: not-allowed; }
.ap-runtime-name { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.ap-runtime-meta { margin-top: 5px; font-size: 10.5px; color: rgba(255,255,255,.48); line-height: 1.35; }
.ap-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff8a85; flex: 0 0 auto; }
.ap-dot.ready { background: #67ddb7; box-shadow: 0 0 0 3px rgba(103,221,183,.12); }
.ap-dot.error { background: #ffbd66; }
.ap-field { margin-top: 11px; }
.ap-field label { margin: 0 0 6px; font-size: 11px; }
.ap-field input, .ap-field select {
  width: 100%; border-radius: 7px; padding: 9px 10px; font-size: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); color: #fff;
}
.ap-plugins { display: grid; gap: 7px; }
.ap-plugin {
  display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-items: center;
  border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 9px 10px;
}
.ap-plugin-name { font-size: 12px; font-weight: 650; }
.ap-plugin-desc { grid-column: 1; font-size: 10.5px; line-height: 1.45; color: rgba(255,255,255,.48); }
.ap-switch { position: relative; width: 35px; height: 20px; }
.ap-switch input { opacity: 0; width: 1px; height: 1px; }
.ap-switch i { position: absolute; inset: 0; border-radius: 10px; background: rgba(255,255,255,.17); cursor: pointer; transition: .18s; }
.ap-switch i::after { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .18s; }
.ap-switch input:checked + i { background: #20b9a3; }
.ap-switch input:checked + i::after { transform: translateX(15px); }
.ap-scaffold-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ap-scaffold {
  min-height: 78px; text-align: left; border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  background: rgba(255,255,255,.045); color: #fff; padding: 9px; cursor: pointer;
}
.ap-scaffold.active { border-color: #4facfe; background: rgba(79,172,254,.1); }
.ap-scaffold b { display: block; font-size: 12px; }
.ap-scaffold span { display: block; margin-top: 4px; font-size: 10px; line-height: 1.4; color: rgba(255,255,255,.45); }
.ap-actions { display: flex; gap: 8px; margin-top: 13px; }
.ap-actions button { margin: 0; }
.ap-primary {
  flex: 1; border: 0; border-radius: 8px; padding: 10px 12px; color: #06201d; font-weight: 700;
  background: #54e1cc; cursor: pointer;
}
.ap-primary:disabled { opacity: .5; cursor: not-allowed; }
.ap-message { min-height: 18px; margin-top: 9px; font-size: 11px; line-height: 1.45; color: rgba(255,255,255,.52); }
.ap-message.error { color: #ff8a85; }
.ap-message.success { color: #72e4b9; }
.ap-compat {
  border: 1px solid rgba(255,189,102,.25); background: rgba(255,189,102,.08); color: #ffd39a;
  border-radius: 8px; padding: 9px 10px; font-size: 11px; line-height: 1.5;
}
.ap-capabilities { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ap-capability { border-radius: 5px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.55); padding: 3px 6px; font-size: 9.5px; }

@media (max-width: 820px) {
  #wsCard .ws-topbar { flex-wrap: wrap; padding: 8px 10px; }
  #wsCard .ws-title { flex: 1; }
  .ws-tabs { order: 3; width: 100%; overflow-x: auto; }
  .ws-runtime-layer { order: 3; width: 100%; }
  .ws-runtime-layer .ws-tabs { max-width: none; flex: 1; }
  .ws-layer-label { flex: 0 0 auto; }
  .ws-tab { flex: 1 0 auto; }
  #wsPathDisplay { display: none; }
  .ws-modelbar { flex-wrap: wrap; padding-right: 12px; padding-left: 12px; }
  .ws-model-trigger-wrap { flex: 1; min-width: 140px; }
  .ws-model-trigger { width: 100%; max-width: none; }
  .ws-model-picker { left: auto; right: 0; width: min(380px, calc(100vw - 24px)); bottom: calc(100% + 6px); top: auto; }
  .ap-config-btn { padding: 7px 10px; }
}
@media (max-width: 640px) {
  .platform-home { grid-template-columns: 1fr; }
  .tile-agent { min-height: 116px; }
  #wsCard .ws-body { flex-direction: column; }
  #wsCard .ws-title {
    max-width: 118px; font-size: 13px; line-height: 1.25; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .ws-sidebar {
    width: 100%; max-height: 300px; flex: 0 0 auto; border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .ws-path-box { padding: 8px 10px; }
  .ws-path-list { max-height: 84px; }
  .ws-path-add { margin-top: 7px; }
  .ws-sess-head { padding: 8px 10px 5px; }
  .ws-sess-list { max-height: 112px; padding: 0 8px 8px; }
  .ws-sess-list .ws-empty { padding: 12px !important; }
  .ws-chat { padding: 12px 8px; }
  .ws-inputbar { padding: 9px 10px 12px; }
  .ws-inputbar textarea { min-width: 0; }
  .ws-modelbar > span[style*="flex:1"] { display: none; }
  #wsCard .ws-check { display: none; }
  #wsCard .ws-modelbar { flex-wrap: nowrap; min-height: 44px; }
  #wsCard .ws-modelbar > label { flex: 0 0 auto; white-space: nowrap; }
  #wsCard .ws-model-trigger-wrap { flex: 1 1 auto; min-width: 100px; }
  #wsCard .ws-model-trigger { max-width: none; width: 100%; }
  #wsCard .ap-provider-badge { display: none !important; }
  #wsCard .ws-chat > .ws-msg { width: 100%; max-width: 100%; }
  #wsCard .ws-model-picker {
    position: fixed; inset: auto 0 0; width: 100vw; max-height: 80vh;
    border-radius: 16px 16px 0 0; padding-top: 4px;
    box-shadow: 0 -18px 48px rgba(0,0,0,.58);
  }
  #wsCard .ws-model-list { max-height: calc(80vh - 42px); }
  #wsCard .ws-model-item { min-height: 44px; padding: 10px 16px; }
  .ap-runtime-list, .ap-scaffold-grid { grid-template-columns: 1fr; }
  .ap-drawer { padding-left: 15px; padding-right: 15px; }
}