/* shared.css - Common styles for all pages */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; display:flex; justify-content:center; background:#f0f0f0; }

.phone-frame {
  width:390px; max-width:100vw; height:844px; max-height:100dvh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#EEF4FF 0%,#FFF0F5 50%,#F5F0FF 100%);
  position:relative; overflow:hidden;
}

.status-bar {
  display:none !important;
}

.glass-card {
  background:rgba(255,255,255,0.2);
  border:1px solid rgba(255,255,255,0.3);
  box-shadow:0 4px 16px rgba(0,0,0,0.06),0 1px 2px rgba(255,255,255,0.25);
  backdrop-filter:blur(16px);
}
.glass-btn {
  background:rgba(255,255,255,0.2);
  border:1px solid rgba(255,255,255,0.3);
  box-shadow:0 2px 8px rgba(0,0,0,0.06),0 1px 2px rgba(255,255,255,0.25);
  backdrop-filter:blur(8px);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.glass-btn:active { transform: scale(0.95); }

.sep { height:0.5px; background:rgba(255,255,255,0.19); width:100%; }

.toggle-on { width:48px;height:28px;border-radius:14px;background:#007AFF;position:relative;cursor:pointer; }
.toggle-on .knob { width:24px;height:24px;border-radius:12px;background:#fff;position:absolute;top:2px;right:2px;box-shadow:0 2px 4px rgba(0,0,0,0.15); }
.toggle-off { width:48px;height:28px;border-radius:14px;background:#E5E5EA;position:relative;cursor:pointer; }
.toggle-off .knob { width:24px;height:24px;border-radius:12px;background:#fff;position:absolute;top:2px;left:2px;box-shadow:0 2px 4px rgba(0,0,0,0.15); }

.row-item {
  display:flex; align-items:center; gap:12px; height:52px; cursor:pointer;
  transition: background 0.15s ease;
}
.row-item:active { background:rgba(255,255,255,0.15); border-radius:12px; }

.icon-circle {
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.bubble-left { border-radius:4px 20px 20px 20px; }
.bubble-right { border-radius:20px 4px 20px 20px; }

.nav-header {
  display:flex; align-items:center; gap:12px; padding:0 20px; flex-shrink:0;
}
.nav-header .back-btn {
  width:44px; height:44px; border-radius:22px; display:flex; align-items:center; justify-content:center;
}
.nav-header h1 { font-size:28px; font-weight:700; color:#1C1C1E; }

/* Avatar */
.avatar {
  border-radius:50%; border:1px solid rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center;
}
.avatar-wrapper {
  display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
  transition: transform 0.15s ease;
}
.avatar-wrapper:active { transform: scale(0.95); }
.avatar-ring {
  border-radius:50%; background:rgba(255,255,255,0.13);
  border:1.5px solid rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,0.06),0 1px 3px rgba(255,255,255,0.31);
}
.group-tag {
  padding:3px 12px; border-radius:999px;
  background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.4);
}
.group-tag span { font-size:11px; color:#666; }

/* ===== Settings-driven styles ===== */

:root {
  --fs-base: 16px;
  --theme-color: #C9D6FF;
}

/* Font size scaling */
[data-fontsize="small"] body { font-size: 14px; }
[data-fontsize="medium"] body { font-size: 16px; }
[data-fontsize="large"] body { font-size: 18px; }
[data-fontsize="small"] .bubble-text,
[data-fontsize="small"] .bubble-sender { font-size: 14px; }
[data-fontsize="large"] .bubble-text,
[data-fontsize="large"] .bubble-sender { font-size: 18px; }
[data-fontsize="small"] .nav-title,
[data-fontsize="small"] .nav-bar .nav-title { font-size: 15px; }
[data-fontsize="large"] .nav-title,
[data-fontsize="large"] .nav-bar .nav-title { font-size: 20px; }
[data-fontsize="small"] .voice-duration { font-size: 11px; }
[data-fontsize="large"] .voice-duration { font-size: 15px; }
[data-fontsize="small"] .row-label { font-size: 13px; }
[data-fontsize="large"] .row-label { font-size: 17px; }

/* Dark mode */
[data-theme="dark"] body { background: #1C1C1E; }
[data-theme="dark"] .phone-frame,
[data-theme="dark"] .screen {
  background: linear-gradient(180deg, #1C1C1E 0%, #2C2C2E 50%, #1C1C1E 100%) !important;
}
[data-theme="dark"] .glass-card,
[data-theme="dark"] .glass-btn {
  background: rgba(58,58,60,0.6);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .nav-bar,
[data-theme="dark"] .record-area {
  background: rgba(44,44,46,0.8);
}
[data-theme="dark"] .status-bar .time,
[data-theme="dark"] .status-icons i,
[data-theme="dark"] .nav-title,
[data-theme="dark"] .nav-bar .nav-title,
[data-theme="dark"] .nav-header h1,
[data-theme="dark"] .recipient-name,
[data-theme="dark"] .user-name,
[data-theme="dark"] .row-label,
[data-theme="dark"] .section-title,
[data-theme="dark"] .bubble-text,
[data-theme="dark"] .voice-duration,
[data-theme="dark"] .center-title,
[data-theme="dark"] .avatar-name {
  color: #F2F2F7 !important;
}
[data-theme="dark"] .bubble-sender,
[data-theme="dark"] .bubble-time,
[data-theme="dark"] .voice-time,
[data-theme="dark"] .user-role,
[data-theme="dark"] .row-value,
[data-theme="dark"] .center-subtitle,
[data-theme="dark"] .info-hint span,
[data-theme="dark"] .record-label {
  color: #A1A1A6 !important;
}
[data-theme="dark"] .bubble-left {
  background: rgba(58,58,60,0.6);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .bubble-right {
  background: rgba(0,122,255,0.35);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .voice-bubble {
  background: rgba(58,58,60,0.6);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .user-card,
[data-theme="dark"] .recipient-card {
  background: rgba(58,58,60,0.5);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .sep { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .text-input-wrap {
  background: rgba(58,58,60,0.6);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .text-input-wrap input { color: #F2F2F7; }
[data-theme="dark"] .text-input-wrap input::placeholder { color: #636366; }
[data-theme="dark"] .toggle.off { background: rgba(255,255,255,0.16); }
[data-theme="dark"] .segment-control { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .back-btn,
[data-theme="dark"] .nav-bar .back-btn {
  background: rgba(58,58,60,0.6);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .back-btn i,
[data-theme="dark"] .nav-bar .back-btn i { color: #F2F2F7 !important; }
[data-theme="dark"] .avatar-ring {
  background: rgba(58,58,60,0.3);
  border-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .group-tag { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .group-tag span { color: #A1A1A6; }
[data-theme="dark"] .bottom-btn {
  background: rgba(58,58,60,0.5);
  border-color: rgba(255,255,255,0.08);
}

/* High contrast */
[data-contrast="high"] .bubble-text,
[data-contrast="high"] .nav-title,
[data-contrast="high"] .nav-bar .nav-title,
[data-contrast="high"] .nav-header h1,
[data-contrast="high"] .recipient-name,
[data-contrast="high"] .user-name,
[data-contrast="high"] .row-label,
[data-contrast="high"] .section-title,
[data-contrast="high"] .voice-duration,
[data-contrast="high"] .center-title,
[data-contrast="high"] .avatar-name {
  font-weight: 800 !important;
}
[data-contrast="high"] .bubble-left {
  border: 2px solid rgba(0,0,0,0.3);
}
[data-contrast="high"] .bubble-right {
  border: 2px solid rgba(0,122,255,0.5);
}
[data-contrast="high"] .glass-card {
  border: 2px solid rgba(0,0,0,0.15);
}
[data-contrast="high"][data-theme="dark"] .bubble-left {
  border-color: rgba(255,255,255,0.3);
}
[data-contrast="high"][data-theme="dark"] .bubble-right {
  border-color: rgba(0,122,255,0.6);
}
[data-contrast="high"][data-theme="dark"] .glass-card {
  border-color: rgba(255,255,255,0.2);
}