/* Conversation header client card: interest line and «Сводка».
   Brief: .impeccable/surfaces/client-card-and-accounts.md. Tokens only from palette.css / design.css.
   Scope: the header subtitle slot, the header «Сводка» trigger, the name-block button on phone,
   and the two layers this module creates (#cc-summary popover, #cc-sheet bottom sheet). */

/* ---------------------------------------------------------------- header identity */
.conversation-header.cc-header .identity h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conversation-header .identity p.cc-subtitle{margin-top:6px;max-width:60ch;font-size:12px;line-height:1.5;color:var(--plum-700)}
.conversation-header .identity p.cc-subtitle:empty{display:none}
/* With an interest line the header keeps its approved height: slightly less padding, two reserved lines. */
.conversation-header.cc-header:has(.cc-interest){padding-block:20px 18px}
.cc-interest{display:flex;align-items:flex-start;gap:6px}
.cc-interest>svg{flex:none;margin-top:2.5px;color:var(--plum-400)}
.cc-interest-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:3em;overflow-wrap:anywhere}
.cc-interest.cc-enter{animation:cc-fade 180ms var(--ease) both}
@keyframes cc-fade{from{opacity:0}to{opacity:1}}

/* One header height whether or not an interest exists yet: no jump when it first arrives by polling. */
@media (min-width:651px){.conversation-header.cc-header{min-height:104px}}

/* ---------------------------------------------------------------- «Сводка» trigger */
.conversation-header .header-actions{flex:none}
.conversation-header .cc-summary-trigger{min-height:36px;padding:0 12px 0 10px;margin-right:4px;gap:7px;color:var(--plum-700);border-color:var(--plum-200)}
.conversation-header .cc-summary-trigger svg{color:var(--plum-600)}
.conversation-header .cc-summary-trigger:hover:not(:disabled) svg{transform:none}
.conversation-header .cc-summary-trigger[aria-expanded="true"]{background:var(--plum-150);border-color:transparent;color:var(--plum-900)}
.conversation-header .cc-summary-trigger[hidden]{display:none}
/* Narrow sheets: the glyph alone, same accessible name. */
.conversation-header.cc-compact .cc-summary-trigger{width:36px;min-width:36px;padding:0;margin-right:0;border-color:transparent;background:none;color:var(--muted)}
.conversation-header.cc-compact .cc-summary-trigger:hover{background:var(--plum-150);color:var(--plum)}
.conversation-header.cc-compact .cc-summary-trigger[aria-expanded="true"]{background:var(--plum-150);color:var(--plum-900)}
.conversation-header.cc-compact .cc-summary-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* The name-block button exists only on phone. */
.cc-identity-btn{display:none}

/* ---------------------------------------------------------------- shared layer anatomy */
.cc-layer{margin:0;padding:0;color:var(--ink);background:var(--surface);overflow:hidden;flex-direction:column}
.cc-layer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 12px 12px 20px;flex:none}
.cc-layer-head h2{font-size:15px;font-weight:600;line-height:1.35;letter-spacing:-.015em}
.cc-layer .cc-close{width:40px;height:40px;min-width:40px;border-radius:10px;margin:-6px 0 0}
.cc-layer .cc-close:focus-visible{outline:3px solid var(--plum-500);outline-offset:2px}
.cc-nowrap{white-space:nowrap}
.cc-meta{margin-top:4px;font-size:12px;line-height:1.5;color:var(--muted)}
.cc-layer-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:2px 20px 20px;scrollbar-width:thin;scrollbar-color:var(--plum-200) transparent}
.cc-layer-body:focus-visible{outline:2px solid var(--plum-500);outline-offset:-4px;border-radius:0 0 12px 12px}
.cc-prose{max-width:76ch;font-size:13px;line-height:1.75;color:var(--ink)}
.cc-prose li::marker{color:var(--plum-400)}
.cc-layer ::selection{background:var(--plum-200);color:var(--plum-900)}

/* ---------------------------------------------------------------- desktop / tablet popover */
.cc-popover{position:fixed;inset:auto;top:var(--cc-top,120px);left:var(--cc-left,auto);width:var(--cc-width,420px);max-height:var(--cc-max-height,520px);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);opacity:0;transform:translateY(-5px);transition:opacity 160ms var(--ease),transform 160ms var(--ease),overlay 160ms allow-discrete,display 160ms allow-discrete}
.cc-popover:popover-open{display:flex;opacity:1;transform:none;transition-duration:180ms}
@starting-style{.cc-popover:popover-open{opacity:0;transform:translateY(-5px)}}

/* ---------------------------------------------------------------- phone sheet */
.cc-sheet{position:fixed;inset:auto 0 var(--cc-bottom,68px) 0;width:100%;max-width:none;max-height:min(85dvh,var(--cc-sheet-max,85dvh));border:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -12px 50px oklch(from var(--plum-950) l c h / .16);opacity:0;transform:translateY(24px);transition:opacity 180ms var(--ease),transform 220ms var(--ease),overlay 220ms allow-discrete,display 220ms allow-discrete}
.cc-sheet:popover-open{display:flex;opacity:1;transform:none}
@starting-style{.cc-sheet:popover-open{opacity:0;transform:translateY(24px)}}
.cc-sheet.cc-dragging{transition:none}
.cc-grabber{width:36px;height:4px;border-radius:2px;background:var(--plum-200);margin:8px auto 0;flex:none;touch-action:none}
.cc-sheet .cc-layer-head{align-items:center;padding:8px 10px 4px 20px;touch-action:none}
.cc-sheet .cc-layer-head h2{font-size:17px;letter-spacing:-.02em}
.cc-sheet .cc-close{margin:0;width:44px;height:44px}
.cc-sheet .cc-layer-body{padding:4px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.cc-sheet-name{font-size:15px;font-weight:600;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.cc-block{margin-top:16px}
.cc-key{font-size:12px;font-weight:600;line-height:1.4;color:var(--plum-700)}
.cc-sheet-interest{margin-top:4px;font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.cc-auto{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--muted)}
.cc-auto svg{color:var(--plum-400)}
.cc-divider{border:0;border-top:1px solid var(--line);margin:18px 0 0}
.cc-sheet .cc-meta{margin-top:2px}
.cc-sheet .cc-prose{margin-top:12px;font-size:15px;line-height:1.7}

@media (max-width:650px){
 .conversation-header.cc-header{min-height:0}
 .conversation-header.cc-header:has(.cc-interest){padding-block:14px 12px}
 .conversation-header [data-mobile-back]{width:44px;min-width:44px;height:44px;margin-left:-8px;flex:none}
 .conversation-header .identity p.cc-subtitle{max-width:none;margin-top:3px;font-size:12px}
 .cc-interest-text{-webkit-line-clamp:1;min-height:1.5em}
 .conversation-header .cc-summary-trigger{display:none}
 /* The whole name block is one target; its heading stays a real heading underneath. */
 .conversation-header .identity>.cc-identity{position:relative;padding:4px 28px 4px 6px;margin:-4px 0 -4px -6px;min-height:48px;display:flex;flex-direction:column;justify-content:center}
 .cc-identity .cc-identity-btn{display:block;position:absolute;inset:0;border:0;border-radius:10px;background:none;padding:0;cursor:pointer;color:var(--plum-600)}
 .conversation-header .identity>.cc-identity{border-radius:10px;transition:background-color 160ms var(--ease)}
 .conversation-header .identity>.cc-identity:has(.cc-identity-btn:hover),.conversation-header .identity>.cc-identity:has(.cc-identity-btn[aria-expanded="true"]){background:var(--plum-100)}
 .cc-identity .cc-identity-btn:focus-visible{outline:3px solid var(--plum-500);outline-offset:1px}
 .cc-chevron{position:absolute;right:6px;top:50%;display:grid;place-items:center;transform:translateY(-50%);transition:transform 180ms var(--ease)}
 .cc-identity-btn[aria-expanded="true"] .cc-chevron{transform:translateY(-50%) rotate(180deg)}
 .cc-popover{display:none!important}
}
@media (min-width:651px){.cc-sheet{display:none!important}}

@media (prefers-reduced-motion:reduce){
 .cc-popover,.cc-sheet,.cc-chevron{transition:none!important}
 .cc-popover:popover-open,.cc-sheet:popover-open{transform:none}
 .cc-interest.cc-enter{animation:none}
}