/* The phone panel's states: in a call, desk phone mode, incoming. Tokens only.
   Loaded after shell.css, which owns the idle panel. */

.gp-phone .gp-phone-status .gp-dot.is-off { background: var(--color-neutral-600); }
.gp-phone[data-mode="desk"] .gp-phone-status { display: none; }
.gp-phone-note.is-warn { color: var(--color-neutral-300); }
.gp-phone-note a { color: var(--color-accent-300); }
.gp-phone[data-state="incall"] .gp-phone-note:not(.is-warn) { font-size: 11px; color: var(--color-neutral-500); }

/* glowing dot, shared by the call card and the desk status line */
.gp-glow { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); }
.gp-glow.is-off { background: var(--color-neutral-600); box-shadow: none; }

/* in a call (2a) */
.gp-phone [data-phone-call-card]:empty { display: none; }
.gp-call { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 8px;
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-accent-700); }
.gp-call-top { display: flex; align-items: center; gap: 8px; }
.gp-call-time { margin-left: auto; font-size: 12px; color: var(--color-neutral-400); font-variant-numeric: tabular-nums; }
.gp-call-name { font-size: 16px; overflow-wrap: anywhere; }
.gp-call-sub { font-size: 12px; color: var(--color-neutral-400); font-variant-numeric: tabular-nums; }
.gp-tiles { display: flex; align-items: center; gap: 4px; }
.gp-tile { width: 24px; height: 24px; border-radius: 6px; background: var(--color-neutral-800);
  display: grid; place-items: center; font-size: 11px; }
.gp-more { font-size: 12px; color: var(--color-neutral-400); margin-left: 4px; }
.gp-call-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gp-call-grid.gp-two { grid-template-columns: repeat(2, 1fr); }
.gp-call-grid .btn { flex-direction: column; gap: 2px; padding: 8px 0; font-size: 11px; }
.gp-call-grid.gp-two .btn { flex-direction: row; gap: 6px; font-size: 13px; padding: 8px 0; }
.gp-call-grid .btn .ph { font-size: 18px; }
.gp-call-grid .btn[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--color-accent); color: var(--color-accent); }
.gp-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gp-keypad .btn { padding: 6px 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.gp-holdline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-neutral-400); }
.gp-holdline .gp-holdname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-holdline .btn { padding: 2px 8px; font-size: 12px; color: var(--color-accent-300); }
.gp-ring .gp-glow { animation: gp-pulse 1.2s ease-in-out infinite; }
@keyframes gp-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .gp-ring .gp-glow { animation: none; } }

/* desk phone mode (2b) */
.gp-phone-seg .seg { display: flex; }
.gp-phone-seg .seg-opt { flex: 1; justify-content: center; }
.gp-phone-via { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-neutral-300); }
.gp-phone[data-state="desk"] [data-phone-desk-card] { display: block; }
.gp-phone [data-phone-desk-card][hidden] { display: none; }
.gp-deskcard { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; border-radius: 8px;
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-accent-700); }
.gp-deskcard-top { display: flex; align-items: center; }
.gp-deskclear { margin-left: auto; width: 24px; height: 24px; padding: 0; color: var(--color-neutral-400); }
.gp-deskname { font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.gp-desksub { color: var(--color-neutral-400); font-size: 12px; }
.gp-bignum { font-size: 30px; letter-spacing: .04em; font-variant-numeric: tabular-nums; line-height: 1.1;
  overflow-wrap: anywhere; }
.gp-deskbtns { display: flex; gap: 6px; margin-top: 4px; }
.gp-deskbtns .btn-icon { flex: none; }
.gp-callbrowser { flex: 1; white-space: nowrap; }
.gp-phone-codes { display: flex; flex-direction: column; }
.gp-code { display: flex; align-items: center; gap: 10px; padding: 4px 2px; border: 0; background: transparent;
  font: inherit; font-size: 12px; color: var(--color-neutral-300); text-align: left; cursor: pointer; border-radius: 6px; }
.gp-code:hover { background: var(--color-neutral-800); }
.gp-codekey { width: 32px; color: var(--color-accent); font-size: 13px; font-variant-numeric: tabular-nums; }
.gp-phone-codes[hidden], .gp-phone-seg[hidden], .gp-phone-via[hidden] { display: none; }