/* Shared Telegram/browser bot workspace. Existing forms and order renderers stay authoritative. */
/* The capsule stretches with the chart, never its individual order rows. */
#detail-view .open-orders-content { align-content:start; grid-template-rows:auto auto; overflow-anchor:none; }
#detail-view .open-orders-list { align-content:start; grid-auto-rows:max-content; }
#detail-view .open-order-item { align-self:start; }
@media (min-width:1280px) {
  body.is-browser-app #detail-view .open-order-item { grid-template-columns:minmax(0,1fr); gap:6px; }
  body.is-browser-app #detail-view .open-order-summary { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 8px; }
}
#detail-view .detail-bot-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
#detail-view .detail-bot-actions:not(:has(a, #detail-connect-keys-action button)) { display:none; }
#detail-view .detail-open-bot-action { margin-left:auto; }
#detail-view .detail-open-bot-link { min-height:36px; padding:6px 12px; background:transparent; color:var(--muted); border-color:var(--border); font-size:12px; }
#detail-view .detail-settings-shortcut { display:none; min-height:36px; padding:6px 12px; color:var(--muted); border-color:var(--border); font-size:12px; }
.bot-overview { display:grid; gap:12px; min-width:0; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--panel); }
.bot-overview .detail-bot-card { margin:0; padding:0; border:0; }
.bot-overview .detail-bot-copy { justify-items:start; gap:6px; }
.bot-overview .detail-bot-copy .status-pill { max-width:100%; white-space:normal; text-align:left; font-size:11px; padding:4px 8px; }
.bot-overview .detail-bot-actions { margin:0; }
.workspace-status { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 16px; min-width:0; }
.workspace-level { display:grid; align-content:start; gap:6px; min-width:0; }
.workspace-status span,.workspace-status small { font-size:12px; color:var(--muted); }
.workspace-status strong { font-size:16px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.workspace-status small { font-size:11px; }
.workspace-status small:empty { display:none; }
#workspace-updated { grid-column:1/-1; color:#e8b56e; }
.workspace-level > span { line-height:16px; }
.workspace-price strong { color:#e5edf7; }
.workspace-price #trade-price-status { color:#e8b56e; }
.workspace-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; margin:7px 0; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.02); }
.workspace-tabs button { min-height:44px; border:0; border-radius:7px; color:var(--muted); background:transparent; font:inherit; font-weight:750; font-size:13px; cursor:pointer; }
.workspace-tabs button[aria-selected="true"] { color:var(--accent); background:var(--accent-soft); }
.workspace-tabs { position:sticky; top:0; z-index:5; background:var(--panel); }
.workspace-tabs button:focus-visible,.workspace-more:focus-visible,.workspace-new-notice:focus-visible,.workspace-latest:focus-visible,.workspace-chat:focus-visible { outline:2px solid #59c8ff; outline-offset:2px; }
.workspace-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; align-content:start; margin-top:7px; }
.workspace-settings .parameters-list > div { gap:20px; }
.workspace-events { border:1px solid var(--border); border-radius:12px; padding:16px; background:var(--panel); scroll-margin-bottom:12px; }
.workspace-events > header { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px; }
.workspace-events h3 { margin:0; font-size:16px; }
.workspace-message { color:var(--muted); font-size:12px; line-height:1.5; }
.workspace-message:empty { display:none; }
.workspace-chat-shell { position:relative; margin-top:12px; }
.workspace-chat { height:clamp(320px,55dvh,620px); overflow-y:auto; overflow-x:hidden; overflow-anchor:none; border-radius:10px; padding:14px; background:rgba(0,0,0,.15); scrollbar-width:none; }
.workspace-chat::-webkit-scrollbar { display:none; }
.workspace-chat { touch-action:pan-y pinch-zoom; -webkit-overflow-scrolling:touch; }
.workspace-feed { display:flex; flex-direction:column; gap:8px; min-height:100%; justify-content:flex-end; }
.workspace-event { flex:none; width:fit-content; min-width:min(200px,100%); max-width:min(560px,100%); border:1px solid var(--border); border-radius:14px 14px 14px 4px; padding:8px 10px 6px; background:#15232b; font-size:13px; line-height:1.35; }
.workspace-event::after { content:""; display:block; clear:both; }
.workspace-event time { float:right; margin:4px 0 0 10px; color:var(--muted); font-size:11px; text-align:right; font-variant-numeric:tabular-nums; }
.workspace-message-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.workspace-message-text strong { font-weight:650; color:inherit; }
.workspace-message-text u { text-underline-offset:2px; text-decoration-thickness:1px; }
.workspace-message-text code { white-space:pre-wrap; font-size:12px; }
.workspace-chat-date { align-self:center; flex:none; margin:12px 0 4px; padding:5px 12px; border-radius:20px; background:rgba(255,255,255,.055); color:var(--muted); font-size:11px; }
.workspace-more,.workspace-new-notice { min-height:44px; padding:10px 14px; color:var(--accent); background:var(--accent-soft); border:1px solid var(--border); border-radius:9px; font:inherit; font-size:13px; cursor:pointer; }
.workspace-more { display:block; width:fit-content; max-width:100%; margin:0 auto 12px; border-radius:24px; }
.workspace-latest { position:absolute; bottom:12px; right:12px; max-width:calc(100% - 24px); min-height:44px; padding:10px 16px; border:1px solid var(--accent); border-radius:24px; background:var(--panel); color:var(--accent); font:inherit; font-size:12px; cursor:pointer; box-shadow:0 4px 18px rgba(0,0,0,.35); }
.workspace-new-notice { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--bottom-nav-chrome-height, 61px) + env(safe-area-inset-bottom) + 12px); width:calc(100% - 32px); max-width:420px; z-index:30; background:var(--panel); border-color:var(--accent); box-shadow:0 8px 28px rgba(0,0,0,.4); }
.workspace-orders { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; gap:7px; }
.workspace-panels { display:contents; }
.open-orders-toggle { cursor:default; }
.open-orders-toggle:hover { color:var(--text); }
.open-orders-content {
  max-height:min(56dvh,560px);
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  scrollbar-width:thin;
}
.open-orders-pagination { display:none !important; }
#detail-title:focus { outline:none; }
.workspace-telegram-access { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--panel); font-size:12px; }
.workspace-telegram-access[hidden] { display:none; }
.workspace-telegram-access strong { font-size:13px; }
.workspace-telegram-access p { margin:4px 0 0; color:var(--muted); line-height:1.5; }
.workspace-telegram-access a { flex:none; display:grid; place-items:center; min-height:44px; padding:8px 14px; border:1px solid var(--accent); border-radius:9px; color:var(--accent); text-decoration:none; }
@media (max-width:480px) { .workspace-telegram-access { flex-wrap:wrap; } .workspace-telegram-access a { width:100%; } }
@media (min-width:800px) {
  .bot-overview { grid-template-columns:minmax(220px,.8fr) minmax(0,1.6fr); gap:16px 28px; }
  .bot-overview .detail-bot-card { grid-column:1; grid-row:1; align-self:center; }
  .bot-overview .workspace-status { grid-column:2; grid-row:1; }
  .bot-overview .detail-bot-actions,.bot-overview .trade-controls,.bot-overview .trade-status,.bot-overview #trade-retry { grid-column:1/-1; }
}
@media (max-width:640px) {
  .bot-overview { padding:12px; gap:12px; }
  .bot-overview .detail-bot-card { gap:10px; }
  .bot-overview #detail-title { font-size:20px; }
  .workspace-status { gap:10px 8px; }
  .workspace-level > span { min-height:32px; line-height:16px; }
  .workspace-status strong { font-size:14px; }
  .workspace-settings { grid-template-columns:minmax(0,1fr); gap:12px; }
  .workspace-events { padding:12px; }
  .workspace-chat { padding:10px; }
}
@media (min-width:1024px) {
  body.is-browser-app .shell { width:100%; max-width:none; padding-inline:clamp(20px,2.5vw,48px); }
  body.is-browser-app .bottom-nav { max-width:none; padding-inline:clamp(20px,2.5vw,48px); }
  body.is-browser-app #detail-view .detail-navigation { gap:8px; margin-bottom:7px; }
  body.is-browser-app #detail-view .detail-navigation .screen-back,
  body.is-browser-app #detail-view .detail-navigation .detail-open-bot-link,
  body.is-browser-app #detail-view .detail-navigation .detail-settings-shortcut {
    min-height:44px;
    box-sizing:border-box;
    padding:8px 12px;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    line-height:1.2;
  }
  body.is-browser-app #detail-view .detail-navigation .detail-settings-shortcut {
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
  }
  body.is-browser-app .workspace-panels { margin-top:7px; }
  body.is-browser-app .workspace-tabs { display:none; }
  body.is-browser-app .workspace-tabs { justify-content:flex-end; gap:8px; padding:0; border:0; background:transparent; }
  body.is-browser-app .workspace-tabs [data-workspace-tab="orders"],
  body.is-browser-app .workspace-tabs [data-workspace-tab="events"] { display:none; }
  body.is-browser-app .workspace-tabs [data-workspace-tab="settings"] { min-height:40px; flex:0 0 auto; padding-inline:20px; border:1px solid var(--border); background:rgba(255,255,255,.025); }
  .workspace-panels { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr); gap:8px; align-items:start; min-width:0; }
  .workspace-panels > .trade-terminal { grid-column:1/-1; margin-top:0; }
  .workspace-events { position:sticky; top:64px; min-width:0; }
  .workspace-events .workspace-chat { height:clamp(360px,calc(100dvh - 280px),620px); }
}
@media (min-width:1280px) {
  /* The wide terminal occupies the available shell height. Header, warnings
     and the trade form keep their natural heights; only the three panes grow.
     At small viewport heights the detail view remains scrollable. */
  body.is-browser-app .shell:has(#detail-view:not([hidden])) {
    --bottom-nav-hit-height:33px;
    --bottom-nav-chrome-height:calc(var(--bottom-nav-hit-height) + 5px + max(4px,env(safe-area-inset-bottom)));
    padding-top:8px;
    padding-bottom:calc(var(--bottom-nav-chrome-height) + 6px);
  }
  body.is-browser-app .shell:has(#detail-view:not([hidden])) .hero { margin-bottom:6px; }
  body.is-browser-app #detail-view .detail-navigation .screen-back,
  body.is-browser-app #detail-view .detail-navigation .detail-open-bot-link,
  body.is-browser-app #detail-view .detail-navigation .detail-settings-shortcut {
    min-height:34px;
    padding:6px 12px;
  }
  body.is-browser-app #detail-view .bot-overview {
    grid-template-columns:minmax(150px,.65fr) minmax(0,1.6fr) minmax(280px,1fr);
    padding:10px 14px;
    gap:8px 16px;
  }
  body.is-browser-app #detail-view .bot-overview #detail-title { font-size:20px; line-height:24px; }
  body.is-browser-app #detail-view .bot-overview .detail-bot-copy { gap:3px; }
  body.is-browser-app #detail-view .bot-overview .status-pill { padding-block:3px; }
  body.is-browser-app #detail-view .bot-overview .trade-controls {
    grid-column:3;
    grid-row:1;
    align-self:center;
    border-top:0;
    border-left:1px solid var(--border);
    padding:0 0 0 12px;
  }
  body.is-browser-app #detail-view .bot-overview .trade-controls button { min-height:34px; padding-block:6px; }
  body.is-browser-app .shell:has(#detail-view:not([hidden])) .bottom-nav-button {
    min-height:var(--bottom-nav-hit-height);
  }
  body.is-browser-app #detail-view:has(#workspace-orders:not([hidden])) {
    display:flex;
    flex-direction:column;
    padding-bottom:0;
  }
  body.is-browser-app #detail-view:has(#workspace-orders:not([hidden])) > * { flex:none; }
  body.is-browser-app #detail-view:has(#workspace-orders:not([hidden])) > .workspace-panels {
    flex:1 0 auto;
    min-height:260px;
  }
  body.is-browser-app .workspace-panels {
    grid-template-columns:minmax(220px,.75fr) minmax(0,2.5fr) minmax(220px,.75fr);
    grid-template-areas:"orders chart events" "orders ticket events";
    align-items:stretch;
    grid-template-rows:minmax(280px,1fr) auto;
  }
  body.is-browser-app .workspace-panels > .trade-terminal { grid-area:ticket; }
  body.is-browser-app .workspace-orders { display:contents; }
  body.is-browser-app .workspace-orders > .open-orders,
  body.is-browser-app .workspace-orders > .trade-chart,
  body.is-browser-app .workspace-events {
    min-width:0;
    min-height:0;
    height:100%;
    box-sizing:border-box;
  }
  body.is-browser-app .workspace-orders > .open-orders {
    grid-area:orders;
    display:flex;
    flex-direction:column;
    contain:size; /* List length must not determine the shared grid height. */
  }
  body.is-browser-app .workspace-orders > .trade-chart { grid-area:chart; }
  body.is-browser-app .workspace-events {
    grid-area:events;
    display:flex;
    flex-direction:column;
    position:static;
    contain:size; /* The notification history scrolls within the assigned row. */
  }
  body.is-browser-app .open-orders-content {
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    overflow-y:auto;
  }
  body.is-browser-app .workspace-events .workspace-chat-shell {
    display:flex;
    flex:1 1 auto;
    min-height:0;
  }
  body.is-browser-app .workspace-events .workspace-chat {
    height:auto;
    flex:1 1 auto;
    min-height:0;
  }
  body.is-browser-app .detail-navigation .detail-settings-shortcut { display:inline-flex; flex:0 0 auto; }
  body.is-browser-app .detail-open-bot-action:empty + .detail-settings-shortcut { margin-left:auto; }
  body.is-browser-app .workspace-tabs { display:none; }
  body.is-browser-app .workspace-orders > .trade-chart {
    display:flex;
    flex-direction:column;
  }
  body.is-browser-app .workspace-orders > .trade-chart .trade-plot {
    display:flex;
    flex:1 1 auto;
    min-height:180px;
    contain:size; /* autoSize canvas dimensions must not feed back into grid sizing. */
    margin-block:8px 12px;
  }
  body.is-browser-app .workspace-orders > .trade-chart .trade-canvas {
    height:auto;
    min-height:0;
    margin-block:0;
    flex:1 1 auto;
  }
  /* Keep the compact two-column order card, but give the numeric column a
     predictable width so values stay aligned inside the left capsule. */
  body.is-browser-app .open-order-item {
    grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
    gap:10px;
    align-items:end;
    padding:10px 8px 12px;
  }
  body.is-browser-app .open-order-details {
    width:100%;
    justify-self:stretch;
    gap:5px;
  }
  body.is-browser-app .open-order-chips { justify-content:flex-end; }
  body.is-browser-app .open-order-row {
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    column-gap:8px;
    font-size:11px;
  }
  body.is-browser-app .open-order-row dt {
    min-width:0;
    overflow-wrap:anywhere;
    white-space:normal;
  }
  body.is-browser-app .open-order-row dd {
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  body.is-browser-app .open-order-time {
    justify-self:end;
    width:100%;
    text-align:right;
  }
}