#calls-panel, #call-history {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  gap: 8px;
}
#phone-tools[data-overview="side"] > #calls-panel { grid-area: dial; }
#calls-panel > #dial { margin: 0; }
@media (max-height: 650px) {
  [data-mac-phone] .phone:has(#dial:not([hidden])) .brand-header { padding-block: 5px; }
  [data-mac-phone] .phone:has(#dial:not([hidden])) .brand-mark { width: 30px; height: 30px; }
  [data-mac-phone] .phone:has(#dial:not([hidden])) .eyebrow { display: none; }
  [data-mac-phone] #calls-panel > #dial .number-label input { min-height: 28px; }
}
.history-heading, .history-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}
.history-heading h2 { margin: 0; font-size: clamp(19px, 3dvh, 25px); }
#keypad-toggle { display: inline-flex; gap: 6px; align-items: center; }
#settings-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-inline-start: auto;
  border-radius: 12px;
}
#settings-toggle[aria-expanded="true"] { color: var(--primary); }
.brand-header:has(#settings-toggle:not([hidden])) .signal-art { display: none; }
@media (prefers-color-scheme: dark) {
  #settings-toggle[aria-expanded="true"] { color: var(--focus); }
}
.history-controls { align-items: end; }
.history-controls label { flex: 1 1 8rem; min-width: 0; }
.history-controls :is(select, input) { width: 100%; min-height: 38px; }
#history-filter {
  background: var(--field);
  color: inherit;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding-inline: 8px;
}
#history-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  align-content: start;
  gap: 6px;
}
[data-mac-phone] #history-results { min-height: 0; overflow: auto; }
#history-results li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 8px;
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
#history-results li svg {
  width: 23px;
  height: 23px;
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--focus);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#history-results li svg[data-call-type="missed"] { color: #b93251; }
#history-results li svg[data-call-type="unanswered"] { color: #946108; }
@media (prefers-color-scheme: dark) {
  #history-results li svg[data-call-type="missed"] { color: #ff91aa; }
  #history-results li svg[data-call-type="unanswered"] { color: #ffc768; }
}
#history-results li strong { grid-column: 2; overflow-wrap: anywhere; }
#history-results li p {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
}
#history-results li button { grid-column: 3; grid-row: 1 / span 2; padding-inline: 8px; }

#history-results li { grid-template-columns: auto minmax(0, 1fr) auto auto; }
#history-results .history-day {
  display: block;
  border: 0;
  padding: 6px 2px 0;
}
.history-day h3 {
  margin: 0;
  font-size: .81rem;
  font-weight: 680;
  color: var(--muted);
}
#history-results time {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-size: .83rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
#history-results .history-call {
  grid-column: 4;
  display: grid;
  place-items: center;
  min-width: 34px;
  padding: 4px;
}
#history-results .history-call svg { width: 17px; height: 17px; }
#settings-panel { min-height: 0; overflow: auto; }
.phone-settings-list { margin: 10px 0; }
.phone-settings-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.phone-settings-list dd { margin: 0; font-weight: 700; text-align: end; }
.settings-actions { display: grid; gap: 8px; }
#settings-logout { color: #b93251; }
@media (prefers-color-scheme: dark) { #settings-logout { color: #ff91aa; } }

body[data-compact-phone] { height: 100dvh; overflow: hidden; }
[data-compact-phone] .phone {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  height: 100%;
  padding: 8px;
  gap: 6px;
}
[data-compact-phone] .brand-header {
  min-height: 0;
  padding: 6px 12px;
  border-radius: 13px;
}
[data-compact-phone] .brand-lockup { gap: 8px; }
[data-compact-phone] .brand-mark { width: 31px; height: 31px; border-radius: 8px; }
[data-compact-phone] h1 { font-size: 21px; }
[data-compact-phone] :is(.eyebrow, .signal-art) { display: none; }
[data-compact-phone] .phone-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  margin: 0;
  padding: 8px;
  border-radius: 14px;
}
[data-compact-phone] .connection { min-height: 26px; padding: 2px 1px 5px; }
[data-compact-phone] .connection p { font-size: .79rem; }
[data-compact-phone] .extension-tag { padding: 1px 7px; }
[data-compact-phone][data-state="ready"] #disconnect { display: none; }
[data-compact-phone] .actions { margin: 0; }
[data-compact-phone][data-state="ready"] .actions:not(:has(#contact-shortcut:not([hidden]))) { display: none; }
[data-compact-phone] #phone-tools {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  gap: 7px;
}
[data-compact-phone] #phone-tools > section { flex: 1 1 auto; min-height: 0; overflow: auto; }
[data-compact-phone] #phone-tools > #calls-panel { overflow: hidden; }
[data-compact-phone] #call-history, [data-compact-phone] #dial { min-height: 0; overflow: auto; }
[data-compact-phone] #history-results { min-height: 0; overflow: auto; }
[data-compact-phone] #history-results li:not(.history-day) { padding-block: 6px; }
[data-compact-phone] .phone-tabs {
  order: 10;
  flex: none;
  grid-template-columns: repeat(5,minmax(0,1fr));
  margin: 0;
  gap: 2px;
  padding: 3px;
  border-radius: 16px;
  background: var(--field);
}
[data-compact-phone] .phone-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  min-height: 46px;
  min-width: 0;
  padding: 2px 0;
  font-size: clamp(.63rem, 2.2vw, .75rem);
  border-radius: 13px;
}
[data-compact-phone] .phone-tabs button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 6px #0002;
}
@media (prefers-color-scheme: dark) {
  [data-compact-phone] .phone-tabs button[aria-pressed="true"] { color: var(--focus); }
}
[data-compact-phone] #dial { flex: 1 1 auto; }
[data-compact-phone] .keypad button { border-radius: 24px; }
[data-compact-phone] .history-heading { flex-wrap: nowrap; }
[data-compact-phone] #keypad-toggle { display: none; }
[data-compact-phone] .history-controls { gap: 5px; }
[data-compact-phone] .history-controls label { font-size: .78rem; }

/* Keep the compact views focused on the active tool. */
[data-compact-phone] .phone-card:has(#call-history:not([hidden]), #favorites-panel:not([hidden])) #contact-shortcut { display: none; }
[data-compact-phone][data-state="ready"] .phone-card:has(#call-history:not([hidden]), #favorites-panel:not([hidden])) .actions { display: none; }
#call-history .history-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; align-items: stretch; }
.history-search-field { position: relative; display: block; }
.history-search-field svg { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
#history-search { display: block; margin: 0; height: 42px; min-height: 42px; padding: 0 12px 0 37px; font-size: .88rem; border-radius: 12px; }
#history-filters { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 13px; background: var(--field); }
#history-filters button { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 44px; min-width: 0; padding: 3px 0; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: clamp(.58rem, 2vw, .68rem); }
#history-filters button[aria-pressed="true"] { color: var(--primary); background: var(--surface); box-shadow: 0 1px 4px #0002; }
@media (prefers-color-scheme: dark) { #history-filters button[aria-pressed="true"] { color: var(--focus); } }
#history-status:empty, #favorite-status:empty, #favorite-results:empty { display: none; }
#history-status:not(:empty), #favorite-empty { padding: 15px 12px; border: 1px dashed var(--rule); border-radius: 12px; text-align: center; }
#history-results li:not(.history-day) { grid-template-columns: 34px minmax(0,1fr) auto 34px; }
.history-direction { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--field); }
#history-results .history-direction svg { width: 19px; height: 19px; }
#history-results li strong, #history-results li p { min-width: 0; overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#history-results .history-call { border-radius: 9px; }

#favorites-panel { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.favorites-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.favorites-heading h2 { margin: 0; font-size: clamp(19px, 3dvh, 25px); }
#favorite-add, #favorite-contact { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
#favorite-add { min-height: 38px; padding: 4px 9px; font-size: .8rem; }
#favorite-add svg, #favorite-contact svg { flex: none; }
#favorite-results { align-content: start; }
#favorites-panel #favorite-results > li { display: flex; align-items: center; gap: 2px; min-width: 0; min-height: 50px; padding: 3px; border: 1px solid var(--rule); border-radius: 12px; }
#favorites-panel .favorite-entry { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px; border: 0; background: transparent; }
.favorite-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--field); color: var(--primary); font-size: .76rem; }
.favorite-detail { min-width: 0; display: grid; gap: 2px; line-height: 1.1; }
.favorite-detail :is(strong,small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favorite-detail small { color: var(--muted); font-size: .75rem; }
.favorite-handset { width: 18px; height: 18px; color: var(--primary); }
@media (prefers-color-scheme: dark) { .favorite-avatar, .favorite-handset { color: var(--focus); } }
#favorites-panel .favorite-remove { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--muted); }
.favorite-remove svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#favorites-panel #favorite-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 8px; margin: 0; border: 1px solid var(--rule); border-radius: 12px; }
#favorite-form input { min-width: 0; width: 100%; }
.favorite-actions { grid-column: 1 / -1; }
@media (max-width: 350px) { #favorites-panel #favorite-form { grid-template-columns: 1fr; } }

.phone-version {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.brand-header .phone-version { color: #b8d5e3; }

#settings-panel { padding: 0 2px 8px; }
.settings-group { display: grid; gap: 8px; margin: 12px 0; padding: 12px; border: 1px solid var(--rule); border-radius: 13px; }
.settings-group h3 { margin: 0; font-size: .92rem; }
.settings-group .phone-settings-list { margin: 0; }
.settings-group .phone-settings-list > div { padding: 7px 0; }
.settings-group .phone-settings-list > div:last-child { border: 0; }
.settings-tone { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.settings-tone select { display: block; width: 100%; min-height: 36px; margin-top: 4px; background: var(--field); color: inherit; border: 1px solid var(--rule); border-radius: 9px; }

.incoming-call {
  display: grid;
  gap: 6px;
  padding: 9px 12px;
  margin-block: 4px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--field);
}
.incoming-call > div {
  display: grid;
  grid-template-columns: minmax(72px, 23%) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}
.incoming-call span { color: var(--muted); font-size: .82rem; }
.incoming-call strong { overflow-wrap: anywhere; }
#incoming-caller { font-variant-numeric: tabular-nums; }
[data-mac-phone] .phone:has(.incoming-call:not([hidden])) .actions { margin-block: 0; }

.history-scope-field { display:grid; gap:6px; margin-bottom:12px; color:var(--muted); font-size:13px; }
.history-scope-field select { width:100%; min-height:42px; border:1px solid var(--rule); border-radius:12px; padding:8px 12px; color:inherit; background:var(--field,transparent); font:inherit; }
#history-results .history-employee { grid-column:2 / 4; font-size:12px; margin:2px 0 0; color:var(--muted); }
#history-access fieldset { min-width:0; border:1px solid var(--rule); border-radius:12px; padding:12px; margin-bottom:12px; }
#history-access legend { padding:0 6px; font-size:13px; font-weight:650; overflow-wrap:anywhere; }
#history-access label { display:flex; align-items:center; gap:10px; min-height:40px; font-size:14px; }
#history-access input[type=checkbox] { width:18px; height:18px; min-height:18px; padding:0; flex:none; accent-color:#00b99a; }
#history-access p { overflow-wrap:anywhere; }
#history-access button { min-height:42px; }
#settings-toggle { color:#176f69; }

.history-scope-description{margin:5px 2px 0;font-size:.75rem;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}