/* Daily Life Doc, round 13 (zone XF): a client's page (js/shell/shell-client.js), drawn as the page "Expert Plans"
   draws "A client's page" (.whead with .av2, .wt, .chn2, .wtabs, .hact; .cpb with the chat's column, .cpplan and
   its rail). One column at 880 px and narrower: the tabs under the name, Call and Pause AI as round buttons. */

/* ---------- The head ---------- */
/* One row at a computer (the page's head): the name and its sub line give way (ellipsis) before the tabs and the
   buttons Call, Pause AI and Ask AI do. */
.cph { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
@media (min-width: 881px) {
  .cph .wt { flex: 1 1 auto; }
  .cph .wtabs, .cph .hact { flex: none; }
}
.chn2 .chnum { white-space: nowrap; }
/* A Telegram client who has not pressed Start: the Start link to copy, beside "Telegram · Not connected yet". */
.chstart { flex: none; margin-left: 6px; padding: 0 8px; border-radius: 6px; background: var(--try-bg); color: var(--try-d); font-size: var(--t-xs); font-weight: 600; line-height: 20px; }
.hact .pill.ask.on { box-shadow: inset 0 0 0 1.5px currentColor; }
.av2 { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1.6px solid var(--sage-d); color: var(--sage-d); display: grid; place-items: center;
  font-weight: 600; font-size: var(--t-s); }
.chn2 { display: inline-block; padding: 0 8px; border-radius: 6px; background: var(--field); color: var(--ink2); font-size: var(--t-xs); font-weight: 500; line-height: 20px; white-space: nowrap; }
.wtabs { display: flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--card) 70%, transparent); }
.wtabs button { position: relative; min-height: 32px; padding: 0 13px; border-radius: 9px; font-size: var(--t-sm); font-weight: 500; color: var(--ink3);
  transition: background-color var(--m-step) ease, color var(--m-step) ease; }
.wtabs button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.hact { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.chpaused { font-size: var(--t-xs); font-weight: 600; color: var(--try-d); background: var(--try-bg); border-radius: 999px; padding: 4px 10px; }
.cppause { display: inline-flex; align-items: center; gap: 6px; }
.cph .wt { margin-right: 0; }
/* A head pill with class "ph": words at a computer, its icon alone as a round button at phone width. */
.hact .pill.ph > svg { display: none; }

/* ---------- The body: the open tab, the right column ---------- */
.client-page, .tabview[data-tab="client"] { height: 100%; }
.cpb { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: stretch;
  transition: grid-template-columns 450ms var(--ease-drawer); }
.cpb.fold { grid-template-columns: minmax(0, 1fr) 46px; }
.cpb.noside { grid-template-columns: minmax(0, 1fr); }
.cpb.noside .cpside { display: none; }
.cpmain { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cpside { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 18px; background: var(--card); }
.cpin { display: flex; flex-direction: column; height: 100%; min-height: 0; transition: opacity 250ms ease; }
.cpb.fold .cpin { opacity: 0; pointer-events: none; }
.cprail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 12px; opacity: 0; pointer-events: none; transition: opacity 250ms ease; }
.cpb.fold .cprail { opacity: 1; pointer-events: auto; transition: opacity 300ms ease 200ms; }
.cprail button { writing-mode: vertical-rl; padding: 14px 7px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: var(--t-xs); font-weight: 600; }
.cphd { flex: none; display: flex; align-items: center; gap: 6px; min-height: 54px; padding: 10px 10px 8px 16px; border-bottom: 1px solid var(--cardline); }
.cphd .xt { margin-right: auto; font-size: var(--t-sm); font-weight: 600; }
.cphd .xt span { font-weight: 400; color: var(--ink3); font-size: var(--t-xs); }
.fbtn { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--ink2);
  transition: background-color var(--m-step) ease, transform var(--m-press) var(--ease-out); }
.fbtn svg { width: 14px; height: 14px; }
.fbtn:active { transform: scale(.92); }
.cplines { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px; font-size: var(--t-sm); line-height: 1.5; }
.cplines .emp { min-height: 0; padding: 24px 8px; }
/* An empty screen inside a card: its round icon stands on the ground colour, not on the card's own. */
.cpchat .emp .eic, .cpside .emp .eic { background: var(--field); box-shadow: none; }

/* The chat's column (the shell's empty one; F1's chat draws its own inside .cpmain). */
.cpchat { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 18px; background: var(--card); overflow: hidden; }
.cpmsgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 12px 14px 8px; }
.cpfield { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--cardline); }
.cpin-x { flex: 1; min-width: 0; min-height: 40px; padding: 9px 14px; border-radius: 20px; background: var(--field); color: var(--ink3); font-size: var(--t-sm); }
.csend { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--surface); }
.csend svg { width: 18px; height: 18px; }
.csend[disabled] { opacity: .35; cursor: default; }

/* Atlas's four fixed fields (the shell's empty Atlas tab). */
.cpfix { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.cpf { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--card); }
.cpf small { font-size: var(--t-xs); font-weight: 500; color: var(--ink3); }
.cpf span { font-size: var(--t-s); }
.cpf span.e { color: var(--ink3); }

/* A client's page fills the place's height: the chat and the plan scroll inside, not the page. */
.page:has(> .tabview[data-tab="client"]) { overflow: hidden; display: flex; flex-direction: column; }
.tabview[data-tab="client"] { flex: 1; min-height: 0; }
.tabview[data-tab="client"] .cpmain[data-tab="plan"],
.tabview[data-tab="client"] .cpmain[data-tab="updates"],
.tabview[data-tab="client"] .cpmain[data-tab="atlas"] { overflow-y: auto; }

/* ---------- One column at phone width ---------- */
@media (max-width: 880px) {
  .cph { gap: 8px; flex-wrap: wrap; }
  .cph .wt { flex: 1; margin-right: 0; }
  .cph .wt b { font-size: var(--t-m); }
  .cph .chn2 { background: none; padding: 0; color: var(--ink3); }
  .av2 { width: 36px; height: 36px; }
  .wtabs { order: 9; flex: 1 0 100%; margin: 4px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wtabs button { padding: 0 4px; }
  .hact .pill { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--card); }
  .hact .pill > span, .hact .pill .chev, .hact .ask { display: none; }
  .hact .pill svg, .hact .pill.ph > svg { display: block; width: 18px; height: 18px; }
  .hact .pill.dark { background: var(--ink); }
  .cppause .chpaused { display: none; }
  .cpb, .cpb.fold { grid-template-columns: minmax(0, 1fr); }
  .cpside { display: none; }
}
@media (max-width: 400px) {
  .chn2 .chnum { display: none; }
}