/* side-panel.css - the side panel (board Group-next-c1-01, frame of 2.1)
   and what it leaves when folded away (2.22). */

@layer components {
  .side-panel {
    --panel-pad-y: var(--space-8);
    --panel-pad-x: var(--space-6);
    flex: 0 0 var(--side-panel-width);
    width: var(--side-panel-width);
    margin: var(--space-6) 0 var(--space-6) var(--space-6);
    align-self: flex-start;
    max-height: calc(100vh - var(--space-10));
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .frame[data-side-panel-state="closed"] .side-panel { display: none; }

  .side-brand {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-2) var(--space-1) 0 var(--space-3);
  }
  .brand-home {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }
  .brand-name {
    color: var(--accent);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-brand);
  }
  .brand-home:hover .brand-name { color: var(--accent-deep); }
  .side-collapse { margin-left: auto; }

  .mark {
    display: block;
    width: var(--mark-width);
    height: var(--mark-height);
    flex: 0 0 auto;
  }
  .mark svg { width: 100%; height: 100%; display: block; }
  .mark path { fill: var(--blue); stroke: none; }

  .side-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .acting-card {
    display: flex;
    flex-direction: column;
    padding: var(--row-pad-y) var(--row-pad-x);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
  }
  /* the full name, first and last, whole: a long one wraps, never cut (F58) */
  .acting-name { overflow-wrap: anywhere; }
  .acting-role {
    font-size: var(--text-xs);
  }

  /* ---- Chats (F17, F21, F21b, F21c, F34): no section while there are none ---- */
  /* skeleton rows while the chats load (web rule 15); no section once there are none */
  .side-chats[data-state="empty"] { display: none; }
  .side-chats-notice:empty { display: none; }
  /* the head keeps the dots' height beside it, and rows sit 2 px apart (F17) */
  .side-chats .section-head { min-height: var(--hit-target); }
  .side-chats ul { display: flex; flex-direction: column; gap: var(--space-1); }
  .chat-row {
    --chat-row-bg: transparent;
    --chat-row-ink: var(--ink-soft);
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    background: var(--chat-row-bg);
  }
  .chat-row:hover, .chat-row:focus-within, .chat-row[data-state="menu"] {
    --chat-row-bg: var(--mist);
    --chat-row-ink: var(--ink);
  }
  /* "Delete this chat?" is open beside Delete: the chat is red behind it */
  .chat-row[data-state="deleting"] {
    --chat-row-bg: var(--danger-soft);
    --chat-row-ink: var(--danger);
  }
  .chat-row .chat-open, .chat-row .chat-open:hover {
    --row-bg: transparent;
    --row-ink: var(--chat-row-ink);
    flex: 1 1 auto;
    min-width: 0;
  }
  /* the pin beside the dots (F34, F34a): a pinned chat shows it always,
     another under the pointer or the focus (Evren to confirm); pressed, it
     pins or unpins */
  .side-pin {
    min-width: 0;
    min-height: 0;
    padding: var(--space-2);
    margin-right: var(--space-3);
  }
  .side-pin .icon, .side-pin .icon svg { width: var(--icon-sm); height: var(--icon-sm); }
  /* folded to nothing rather than removed, so it keeps the focus a redraw gives back */
  .chat-row[data-pinned="false"]:not(:hover, :focus-within) .side-pin {
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
  }
  .side-chat-time { padding-right: var(--row-pad-x); cursor: pointer; }
  /* in the side panel the dots take the time's place beside the pin rather
     than covering it (F34a, F34b); folded to nothing, not removed, so a
     redraw can give them the focus back */
  .side-panel .chat-row .chat-dots { position: static; }
  .side-panel .chat-row:not(:hover, :focus-within, [data-state="menu"], [data-state="deleting"]) .chat-dots {
    width: 0;
    padding: 0;
    overflow: hidden;
  }
  .side-panel .chat-row:is(:hover, :focus-within, [data-state="menu"], [data-state="deleting"]) .side-chat-time {
    display: none;
  }
  .chat-pin { display: flex; flex: none; margin-right: var(--space-3); }
  .chat-pin .icon, .chat-pin .icon svg { width: var(--icon-sm); height: var(--icon-sm); }
  .chat-row[data-pinned="false"] .chat-pin { display: none; }
  .chat-time {
    flex: 0 0 auto;
    color: var(--ink-faint);
    font-size: var(--text-sm);
  }
  /* the dots sit inside the row at its height, over the time, shown under
     the pointer, with the focus, and while the row's options are open */
  .chat-dots {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-right: var(--space-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--chat-row-bg);
    opacity: 0;
  }
  .chat-row:hover .chat-dots, .chat-row:focus-within .chat-dots,
  .chat-row[data-state="menu"] .chat-dots, .chat-row[data-state="deleting"] .chat-dots { opacity: 1; }
  .chat-dots .icon-btn { min-height: 0; height: 100%; }
  .chat-dots .icon, .chat-dots .icon svg { width: var(--icon-dots); height: var(--icon-dots); }
  /* Rename: the name edited in its row */
  .chat-row[data-state="renaming"] :is(.chat-open, .side-pin, .side-chat-time, .chat-dots) { display: none; }
  .chat-rename { flex: 1 1 auto; padding: var(--hairline) var(--space-1); }
  .chat-rename-input {
    display: block;
    width: 100%;
    padding: var(--input-pad-y) var(--space-4);
    border: var(--hairline) solid var(--accent-line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--ink);
    font-size: var(--text-row);
  }

  /* folded away: the open control and the mark, top left of the page */
  .side-rail {
    display: none;
    align-items: center;
    gap: var(--space-5);
    margin-left: calc(var(--space-12) * -1 - var(--space-8));
    padding-bottom: var(--space-4);
  }
  .frame[data-side-panel-state="closed"] .side-rail { display: flex; }
}