* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

:root {
  --bg: #000;
  --bg2: #1c1c1e;
  --card: #2c2c2e;
  --card-border: #3a3a3c;
  --text: #f5f5f7;
  --text2: #98989e;
  --text3: #636366;
  --green: #30d158;
  --red: #ff453a;
  --blue: #0a84ff;
  --orange: #ff9f0a;
  --teal: #64d2ff;
  --purple: #bf5af2;
  --gray: #8e8e93;
  --separator: rgba(84, 84, 88, 0.35);
  --radius: 12px;
  --relay-color: #4AD496;
  --concierge-color: #FF9F0A;
  --medassist-color: #64D2FF;
  --general-color: #F3C11B;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.25);
}

#app {
  max-width: 430px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden
}

.screen {
  display: none;
  height: 100%;
  flex-direction: column;
  overflow-y: auto;
  background: var(--bg);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.screen.active {
  display: flex;
  z-index: 1;
}

.screen.animating-out {
  display: flex;
  z-index: 2;
}

.screen.animating-in {
  display: flex;
  z-index: 3;
}

/* ---- Zoom: home → app ---- */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.85);
  }
}

/* Home fades slightly when app zooms in */
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ---- Slide: within-app navigation ---- */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideOutToRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-30%);
    opacity: 0.7;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutToLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(-30%);
    opacity: 0.7;
  }
}

/* Animation utility classes */
.anim-zoom-in {
  animation: zoomIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.anim-zoom-out {
  animation: zoomOut 0.28s cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}

.anim-fade-out {
  animation: fadeOut 0.28s ease forwards;
}

.anim-fade-in {
  animation: fadeIn 0.32s ease forwards;
}

.anim-slide-in-right {
  animation: slideInFromRight 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.anim-slide-out-right {
  animation: slideOutToRight 0.28s cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}

.anim-slide-in-left {
  animation: slideInFromLeft 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.anim-slide-out-left {
  animation: slideOutToLeft 0.28s cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}

/* ========== STATUS BAR ========== */
.phone-status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.status-icons {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 12px
}

.signal {
  letter-spacing: -2px;
  font-size: 8px
}

.wifi {
  display: flex;
  align-items: center;
}

.wifi svg {
  display: block;
}

.battery {
  display: flex;
  align-items: center;
}

.battery svg {
  display: block;
}

/* ========== HOME SCREEN ========== */
.home-bg {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url('images/background.png') center/cover no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.home-top-space {
  height: 90px;
  flex-shrink: 0
}

.app-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 12px;
  padding: 0 24px;
  align-content: start;
}

.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app-icon:active .icon-img {
  transform: scale(0.9);
  opacity: 0.8
}

.icon-img {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: transform 0.1s, opacity 0.1s;
  position: relative;
  overflow: hidden;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
}

.icon-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center
}

.dock-icon .icon-label {
  display: none
}

/* App Icon Colors */
.icon-calendar {
  background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
  color: #000;
  font-weight: 700;
  font-size: 18px;
  flex-direction: column
}

.icon-calendar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  background: var(--red);
  border-radius: 14px 14px 0 0
}

.cal-day {
  margin-top: 8px;
  font-size: 22px;
  color: #333
}

.icon-contacts {
  background: linear-gradient(135deg, #e8e8ed, #c7c7cc);
  font-size: 28px
}

.icon-contacts::after {
  content: '👤';
  font-size: 28px
}

.icon-settings {
  background: linear-gradient(135deg, #8e8e93, #636366)
}

.icon-settings::after {
  content: '⚙';
  font-size: 28px
}

.icon-photos {
  background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3)
}

.icon-photos::after {
  content: '🌄';
  font-size: 26px
}

.icon-camera {
  background: linear-gradient(135deg, #3a3a3c, #2c2c2e)
}

.icon-camera::after {
  content: '📷';
  font-size: 26px
}

.icon-maps {
  background: linear-gradient(135deg, #54a0ff, #2e86de)
}

.icon-maps::after {
  content: '🗺';
  font-size: 26px
}

.icon-weather {
  background: linear-gradient(135deg, #74b9ff, #0984e3)
}

.icon-weather::after {
  content: '🌤';
  font-size: 26px
}

.icon-notes {
  background: linear-gradient(135deg, #ffeaa7, #fdcb6e)
}

.icon-notes::after {
  content: '📝';
  font-size: 26px
}

.icon-music {
  background: linear-gradient(135deg, #fd79a8, #e84393)
}

.icon-music::after {
  content: '🎵';
  font-size: 26px
}

.icon-clock {
  background: linear-gradient(135deg, #2d3436, #000)
}

.icon-clock::after {
  content: '🕐';
  font-size: 26px
}

.icon-appstore {
  background: linear-gradient(135deg, #0a84ff, #0040dd)
}

.icon-appstore::after {
  content: 'A';
  font-size: 26px;
  color: white;
  font-weight: 700
}

.icon-health {
  background: linear-gradient(135deg, #fff, #f0f0f0)
}

.icon-health::after {
  content: '❤';
  font-size: 26px
}

.icon-phone {
  background: linear-gradient(135deg, #30d158, #248a3d)
}

.icon-phone::after {
  content: '📞';
  font-size: 24px
}

.icon-messages {
  background: linear-gradient(135deg, #30d158, #248a3d)
}

.icon-messages::after {
  content: '💬';
  font-size: 24px
}

.icon-mail {
  background: linear-gradient(135deg, #0a84ff, #0040dd)
}

.icon-mail::after {
  content: '✉';
  font-size: 24px
}

.icon-browser {
  background: linear-gradient(135deg, #5ac8fa, #007aff)
}

.icon-browser::after {
  content: '🧭';
  font-size: 24px
}

.dock {
  display: flex;
  justify-content: space-around;
  padding: 22px 24px 28px;
  background: rgba(30, 30, 30, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 28px;
  margin: 0 8px 8px;
  border: 0.5px solid rgba(255, 255, 255, 0.15);
}

.dock .icon-img {
  width: 56px;
  height: 56px
}

.app-icon[data-app="none"] .icon-img {
  filter: grayscale(0.85) brightness(0.55);
  opacity: 0.6;
}

.app-icon[data-app="none"] .icon-label {
  opacity: 0.6;
}

/* ========== APP HEADER ========== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 56px 16px 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.app-header h2 {
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  flex: 1;
}

.back-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 24px;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 8px;
  width: 40px;
  text-align: left;
  flex-shrink: 0;
}

.app-header>span:last-child {
  width: 40px;
  flex-shrink: 0;
}

/* ========== SETTINGS LIST ========== */
.settings-list,
.delegation-content,
.agent-detail-content,
.contacts-list,
.contact-detail-content,
.ledger-content {
  padding: 0 16px 32px;
  overflow-y: auto;
  flex: 1;
}

.settings-group {
  background: var(--card);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}

.group-label {
  font-size: 13px;
  color: var(--text2);
  text-transform: uppercase;
  padding: 24px 16px 8px;
  letter-spacing: 0.5px;
}

.settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 0.5px solid var(--separator);
}

.settings-item:last-child {
  border-bottom: none
}

.settings-item:active {
  background: rgba(255, 255, 255, 0.05)
}

.settings-item.highlight {
  background: rgba(10, 132, 255, 0.08)
}

.si-detail {
  color: var(--text2);
  font-size: 15px;
  margin-left: auto
}

.si-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.si-wifi {
  background: #0a84ff
}

.si-wifi::after {
  content: '📶'
}

.si-bluetooth {
  background: #0a84ff
}

.si-bluetooth::after {
  content: 'ᛒ';
  color: white;
  font-weight: 700
}

.si-cellular {
  background: #30d158
}

.si-cellular::after {
  content: '📱'
}

.si-notifications {
  background: #ff453a
}

.si-notifications::after {
  content: '🔔'
}

.si-sounds {
  background: #ff453a
}

.si-sounds::after {
  content: '🔊'
}

.si-focus {
  background: #bf5af2
}

.si-focus::after {
  content: '🌙'
}

.si-delegation {
  background: linear-gradient(135deg, #30d158, #ff9f0a, #ff453a);
  position: relative
}

.si-delegation::after {
  content: 'R';
  color: white;
  font-weight: 800;
  font-size: 16px
}

.si-general {
  background: #8e8e93
}

.si-general::after {
  content: '⚙'
}

.si-display {
  background: #0a84ff
}

.si-display::after {
  content: '☀';
  font-size: 18px
}

.si-wallpaper {
  background: #64d2ff
}

.si-wallpaper::after {
  content: '🖼'
}

.si-privacy {
  background: #0a84ff
}

.si-privacy::after {
  content: '🤚'
}

/* ========== DELEGATION ========== */
.delegation-hero {
  text-align: center;
  padding: 32px 0 20px;
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.relay-logo-container {
  position: relative;
  width: 310px;
  height: 310px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 1;
}

.relay-logo-ring {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  padding: 5px;
  background: conic-gradient(#49D496, #F3C11B, #F65009, #49D496);
  position: relative;
  z-index: 2;
  animation: rotateGradient 12s linear infinite;
}

@keyframes rotateGradient {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.relay-logo-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Counter-rotate to keep content upright */
  animation: counterRotate 12s linear infinite;
}

@keyframes counterRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

.relay-logo-img {
  width: 135px;
  height: 135px;
  object-fit: contain;
  border-radius: 0;
}

/* Pulsating rings */
.relay-pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 55%, rgba(180, 180, 185, 0.15) 70%, rgba(180, 180, 185, 0.08) 85%, transparent 100%);
  transform: scale(0.05);
  opacity: 0;
  animation: pulseRadiate 5s ease-out infinite;
  z-index: 3;
  pointer-events: none;
}

.relay-pulse-ring:nth-child(2) {
  animation-delay: 1.7s;
}

.relay-pulse-ring:nth-child(3) {
  animation-delay: 3.4s;
}

@keyframes pulseRadiate {
  0% {
    transform: scale(0.05);
    opacity: 0;
  }

  10% {
    opacity: 0.4;
  }

  70% {
    opacity: 0.15;
  }

  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

.delegation-subtitle {
  font-size: 13px;
  color: var(--text2)
}

.agent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  border-bottom: 0.5px solid var(--separator);
}

.agent-item:last-child {
  border-bottom: none
}

.agent-item:active {
  background: rgba(255, 255, 255, 0.05)
}

.agent-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0
}

.agent-dot.green {
  background: var(--green)
}

.agent-dot.blue {
  background: var(--blue)
}

.agent-dot.orange {
  background: var(--orange)
}

.agent-dot.gray {
  background: var(--gray)
}

.agent-dot.red {
  background: var(--red)
}

.agent-info {
  flex: 1
}

.agent-name {
  display: block;
  font-size: 16px;
  font-weight: 500
}

.agent-desc {
  display: block;
  font-size: 13px;
  color: var(--text2)
}

/* ========== AGENT DETAIL ========== */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--separator);
}

.detail-row:last-child {
  border-bottom: none
}

.toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--separator);
}

.toggle-item:last-child {
  border-bottom: none
}

.toggle-item.disabled {
  opacity: 0.4
}

.toggle-item.disabled span {
  color: var(--text3)
}

/* Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
  flex-shrink: 0
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card-border);
  border-radius: 31px;
  transition: 0.3s;
}

.slider::before {
  content: '';
  position: absolute;
  height: 27px;
  width: 27px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input:checked+.slider {
  background: var(--green)
}

input:checked+.slider::before {
  transform: translateX(20px)
}

input:disabled+.slider {
  cursor: not-allowed;
  background: var(--card-border)
}

/* ========== CONTACTS ========== */
.contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 0.5px solid var(--separator);
}

.contact-row:active {
  background: rgba(255, 255, 255, 0.05)
}

.contact-row.disabled {
  opacity: 0.5;
  cursor: default
}

.contact-row.disabled:active {
  background: none
}

.contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--text2);
  flex-shrink: 0;
}

.contact-row-name {
  font-size: 16px;
  flex: 1
}

.contact-letter-header {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  background: var(--bg2);
  position: sticky;
  top: 0;
}

/* Contact Detail */
.contact-hero {
  text-align: center;
  padding: 24px 0 16px
}

.contact-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 12px;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 600;
  color: var(--text2);
}

.contact-phone {
  font-size: 14px;
  color: var(--text2);
  margin-top: 4px
}

.contact-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 16px 20px;
  flex-wrap: wrap;
}

.contact-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--card);
  border: none;
  border-radius: var(--radius);
  padding: 10px 14px;
  cursor: pointer;
  color: var(--text2);
  font-family: inherit;
  font-size: 11px;
  min-width: 64px;
}

.contact-action-btn:active {
  background: var(--card-border)
}

.contact-action-btn.relay-action {
  color: var(--green);
  border: 1px solid rgba(48, 209, 88, 0.3)
}

.contact-action-btn.relay-action:active {
  background: rgba(48, 209, 88, 0.15)
}

.cab-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px
}

.cab-message::after {
  content: '💬'
}

.cab-call::after {
  content: '📞'
}

.cab-video::after {
  content: '🎥'
}

.cab-mail::after {
  content: '✉️'
}

.cab-relay::after {
  content: 'R';
  font-weight: 800;
  color: var(--green);
  font-size: 16px
}

.category-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px
}

.cat-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--card-border);
  background: none;
  color: var(--text2);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.cat-btn.active {
  background: var(--blue);
  color: white;
  border-color: var(--blue)
}

.category-agent-label {
  font-size: 13px;
  color: var(--text2);
  padding: 4px 16px 12px;
}

.category-agent-label span {
  color: var(--green);
  font-weight: 600
}

/* ========== CALENDAR ========== */
.calendar-content {
  padding: 0 16px 32px;
  overflow-y: auto;
  flex: 1
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 16px;
}

.calendar-nav button {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 24px;
  cursor: pointer;
  padding: 4px 12px;
  font-family: inherit;
}

#cal-nav-label {
  font-size: 17px;
  font-weight: 600
}

.calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  color: var(--text2);
  padding-bottom: 8px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 20px;
}

.cal-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

.cal-cell:active {
  background: rgba(255, 255, 255, 0.1)
}

.cal-cell.today {
  color: var(--blue);
  font-weight: 700
}

.cal-cell.selected {
  background: var(--blue);
  color: white;
  font-weight: 600
}

.cal-cell.other-month {
  color: var(--text3)
}

.cal-cell .event-dot {
  position: absolute;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.cal-events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0
}

.cal-events-header h3 {
  font-size: 17px;
  font-weight: 600
}

.add-event-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--blue);
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.cal-events-list {
  min-height: 60px
}

.cal-event-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card);
  border-radius: 8px;
  margin-bottom: 6px;
}

.cal-event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0
}

.cal-event-info {
  flex: 1
}

.cal-event-title {
  font-size: 15px;
  font-weight: 500
}

.cal-event-time {
  font-size: 12px;
  color: var(--text2)
}

.cal-event-agent {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px
}

.empty-state {
  font-size: 14px;
  color: var(--text3);
  text-align: center;
  padding: 20px
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden {
  display: none
}

.modal-content {
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
  width: calc(100% - 48px);
  max-width: 380px;
}

.modal-content h3 {
  margin-bottom: 16px;
  font-size: 17px
}

.modal-content input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  font-size: 16px;
  margin-bottom: 10px;
  font-family: inherit;
  outline: none;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px
}

.modal-cancel,
.modal-save {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.modal-cancel {
  background: var(--bg2);
  color: var(--text2)
}

.modal-save {
  background: var(--blue);
  color: white
}

/* ========== CALL SETUP ========== */
.form {
  padding: 0 20px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto
}

.form label {
  font-size: 13px;
  color: var(--text2);
  margin-top: 6px
}

.form input,
.form textarea {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text);
  font-size: 16px;
  outline: none;
  font-family: inherit;
  resize: none;
}

.task-input-row {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.voice-task-btn {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text2);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.voice-task-btn.recording {
  background: var(--red);
  color: white;
  border-color: var(--red)
}

.toggle-row {
  display: flex;
  gap: 8px;
  margin-top: 4px
}

.toggle-btn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text2);
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}

.toggle-btn.active {
  background: var(--green);
  color: var(--bg);
  border-color: var(--green);
  font-weight: 600
}

.primary-btn {
  margin-top: auto;
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: var(--green);
  color: var(--bg);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.setup-agent-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--card);
  border-radius: var(--radius);
  margin-bottom: 4px;
}

.setup-agent-badge .agent-name {
  font-weight: 600
}

/* ========== CALL SCREEN ========== */
.call-bar {
  padding: 56px 20px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.call-bar-left {
  display: flex;
  align-items: center;
  gap: 12px
}

.avatar {
  width: 44px;
  height: 44px;
  background: var(--card);
  border-radius: 50%;
  border: 2px solid var(--card-border);
  flex-shrink: 0;
}

.call-name {
  font-size: 16px;
  font-weight: 600
}

.relay-tag {
  font-size: 11px;
  background: var(--green);
  color: var(--bg);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
  display: inline-block;
  margin-top: 2px;
}

.timer {
  font-size: 14px;
  color: var(--text2);
  font-variant-numeric: tabular-nums
}

.transcript {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px
}

.msg {
  margin-bottom: 14px
}

.msg-role {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px
}

.msg-role.relay {
  color: var(--green)
}

.msg-role.user {
  color: var(--blue)
}

.msg-role.system {
  color: var(--text2)
}

.msg-role.instruction {
  color: var(--orange)
}

.msg-text {
  font-size: 15px;
  line-height: 1.5;
  background: var(--card);
  padding: 10px 14px;
  border-radius: var(--radius);
}


.mic-btn.listening {
  background: var(--green);
  color: var(--bg);
  transform: scale(1.1)
}

.end-btn {
  margin: 8px 20px 32px;
  padding: 14px;
  border-radius: 14px;
  border: none;
  background: var(--red);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* ========== POST-CALL ========== */
.postcall-summary {
  text-align: center;
  padding: 16px 20px 8px
}

.postcall-agent {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  background: var(--card);
  padding: 6px 14px;
  border-radius: 20px;
  color: var(--green);
}

.subtitle {
  color: var(--text2);
  font-size: 14px;
  margin-top: 8px
}

/* ========== LEDGER ========== */
.ledger-item {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
}

.ledger-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px
}

.ledger-item-agent {
  font-size: 13px;
  font-weight: 600
}

.ledger-item-time {
  font-size: 12px;
  color: var(--text3)
}

.ledger-item-desc {
  font-size: 14px;
  color: var(--text2)
}

/* ========== LOADING DOTS ========== */
@keyframes blink {

  0%,
  100% {
    opacity: .2
  }

  50% {
    opacity: 1
  }
}

.loading-dots span {
  animation: blink 1.4s infinite;
  font-size: 20px
}

.loading-dots span:nth-child(2) {
  animation-delay: .2s
}

.loading-dots span:nth-child(3) {
  animation-delay: .4s
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
  width: 0;
  background: transparent
}

/* ========== DIALER ========== */
.dialer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 32px;
  flex: 1;
  justify-content: flex-end
}

.dialer-display {
  width: 100%;
  text-align: center;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 2px;
  background: none;
  border: none;
  color: var(--text);
  padding: 20px 0;
  outline: none;
  font-family: inherit;
  caret-color: transparent;
}

.dialer-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 280px;
  margin-bottom: 24px
}

.dial-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  margin: 0 auto;
  transition: background 0.1s;
}

.dial-key:active {
  background: var(--card-border)
}

.dial-num {
  font-size: 28px;
  font-weight: 300;
  line-height: 1
}

.dial-sub {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text2);
  margin-top: 2px
}

.dialer-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 12px
}

.dialer-call-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  background: var(--green);
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialer-call-btn:active {
  opacity: 0.8
}

.dialer-relay-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--green);
  background: none;
  cursor: pointer;
  color: var(--green);
  font-family: inherit;
}

.dialer-relay-btn span:first-child {
  font-size: 24px;
  font-weight: 800;
  line-height: 1
}

.dialer-relay-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 2px
}

.dialer-relay-btn:active {
  background: rgba(48, 209, 88, 0.15)
}

.dialer-delete-btn {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 24px;
  cursor: pointer;
  padding: 8px 16px;
  font-family: inherit;
}



/* ========== RECEIVER LANDING ========== */
.receiver-landing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  padding: 40px;
}

.large-ring {
  width: 120px;
  height: 120px
}

.large-ring .relay-logo-inner {
  font-size: 48px
}

.receiver-status {
  color: var(--text2);
  font-size: 15px;
  text-align: center
}

.relay-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: var(--bg);
  font-weight: 800;
  font-size: 18px;
}

/* ========== RECEIVER INCOMING CALL OVERLAY ========== */
.incoming-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: linear-gradient(180deg, #1a1a2e 0%, #0a0a15 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.incoming-overlay h2 {
  font-size: 22px;
  font-weight: 400
}

.incoming-overlay p {
  color: var(--text2);
  font-size: 14px
}

.incoming-actions {
  display: flex;
  gap: 40px;
  margin-top: 24px
}

.incoming-action-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.incoming-accept {
  background: var(--green)
}

.incoming-decline {
  background: var(--red)
}

/* ========== DIRECTOR INPUT ========== */
.dir-input-area {
  position: relative;
  padding: 8px 12px 28px;
  border-top: 0.5px solid var(--separator);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.dir-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.dir-textarea {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 10px 16px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  resize: none;
  outline: none;
  max-height: 120px;
  line-height: 1.4;
  min-height: 40px;
}

.dir-side-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text2);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dir-side-btn:active {
  background: var(--card-border)
}

.dir-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--green);
  color: var(--bg);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dir-send-btn.hidden {
  display: none
}

.intercept-popup {
  position: absolute;
  bottom: 72px;
  left: 12px;
  right: 12px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 4px;
  z-index: 10;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.intercept-popup.hidden {
  display: none
}

.intercept-popup-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: var(--orange);
  color: var(--bg);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* ========== RECEIVER INPUT ========== */
.recv-input-area {
  padding: 8px 12px 28px;
  border-top: 0.5px solid var(--separator);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.recv-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.recv-textarea {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 10px 16px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  resize: none;
  outline: none;
  max-height: 120px;
  line-height: 1.4;
  min-height: 40px;
}

.recv-mode-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text2);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recv-mode-btn:active {
  background: var(--card-border)
}

.recv-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--green);
  color: var(--bg);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recv-mic-btn {
  flex: 1;
  height: 44px;
  border-radius: 22px;
  border: 2px solid var(--green);
  background: transparent;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.recv-mic-btn.listening {
  background: var(--green);
  color: var(--bg);
  transform: scale(1.02)
}

/* Auto-grow textareas */
.dir-textarea,
.recv-textarea {
  overflow: hidden
}

/* ========== UPDATED ICONS ========== */
.icon-photos-dock {
  background: linear-gradient(135deg, #fff, #f0f0f0)
}

.icon-photos-dock::after {
  content: '🌄';
  font-size: 24px
}

.icon-fullscreen {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2)
}

.icon-fullscreen::after {
  content: '⛶';
  font-size: 26px;
  color: white
}

.app-icon[data-app="fullscreen"] .icon-img {
  filter: none;
  opacity: 1
}

.app-icon[data-app="fullscreen"] .icon-label {
  opacity: 1
}

/* Relay icon images */
.relay-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%
}

.si-delegation-img {
  width: 18px;
  height: 18px;
  object-fit: contain
}

.si-delegation::after {
  content: none
}

.cab-relay-img {
  width: 22px;
  height: 22px;
  object-fit: contain
}

.cab-relay::after {
  content: none
}

.dialer-relay-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 50%
}

.dialer-relay-btn span:first-child {
  display: none
}

/* Agent colors */
.dot-relay {
  background: #4AD496
}

.dot-concierge {
  background: #FF9F0A
}

.dot-medassist {
  background: #64D2FF
}

.dot-general {
  background: #F3C11B
}

.agent-color-relay {
  color: #4AD496
}

.agent-color-concierge {
  color: #FF9F0A
}

.agent-color-medassist {
  color: #64D2FF
}

.agent-color-general {
  color: #F3C11B
}

/* Receiver fullscreen button */
.recv-fullscreen-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recv-fullscreen-btn:active {
  background: rgba(255, 255, 255, 0.2)
}

/* ========== AGENT SELECTOR DROPDOWN ========== */
.setup-agent-arrow {
  color: var(--text2);
  font-size: 12px;
  margin-left: auto
}

.setup-agent-badge {
  cursor: default
}

.setup-agent-badge.selectable {
  cursor: pointer
}

.setup-agent-badge.selectable:active {
  background: var(--card-border)
}

.agent-select-dropdown {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow-y: auto;
  max-height: 200px;
  margin-top: -4px;
  margin-bottom: 8px;
}

.agent-select-dropdown.hidden {
  display: none
}

.agent-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 0.5px solid var(--separator);
  background: none;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.agent-select-option:last-child {
  border-bottom: none
}

.agent-select-option:active {
  background: rgba(255, 255, 255, 0.05)
}

.agent-select-option .agent-dot {
  flex-shrink: 0
}