/* Lingvanex Phone Call for the web — design tokens and shared components.
   Copied from the Mac app (AppConstants.swift, PhoneCallTranslatorViews.swift): sizes in px = pt. */

:root {
    --blue: #6888C0;
    --active-blue: #4270C0;
    --accent: #4270C0;
    --subtle-blue-back: rgba(104, 136, 192, .15);
    --card-border: rgba(60, 60, 67, .3);       /* tertiaryLabel @ 20% reads close to this */
    --card-border-solid: #d9d9de;
    --group-fill: rgba(0, 0, 0, .055);
    --hover-fill: rgba(0, 0, 0, .06);
    --adaptive-gray: #999999;
    --ai-green: rgb(51, 158, 92);
    --call-green: #4CAF62;
    --red: #FF3B30;
    --orange: #FF9500;
    --green: #34C759;
    --label: #1d1d1f;
    --secondary-label: rgba(60, 60, 67, .6);
    --tertiary-label: rgba(60, 60, 67, .3);
    --placeholder: rgba(60, 60, 67, .3);
    --window-bg: #ffffff;
    --chrome-bg: #ffffff;
    --bar-bg: #f5f5f7;
    --text-bg: #ffffff;
    --control-bg: #ffffff;
    --separator: rgba(0, 0, 0, .1);
    --shadow-pop: 0 8px 28px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .12);
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
    --r-xs: 3px; --r-s: 6px; --r-m: 8px; --r-l: 10px; --r-xl: 12px; --r-xxl: 16px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --accent: #6888C0;
        --card-border: rgba(235, 235, 245, .2);
        --card-border-solid: #3a3a3c;
        --group-fill: rgba(255, 255, 255, .07);
        --hover-fill: rgba(255, 255, 255, .08);
        --adaptive-gray: #666666;
        --label: #f5f5f7;
        --secondary-label: rgba(235, 235, 245, .6);
        --tertiary-label: rgba(235, 235, 245, .3);
        --placeholder: rgba(235, 235, 245, .3);
        --window-bg: #1e1e1e;
        --chrome-bg: #262626;
        --bar-bg: #2a2a2a;
        --text-bg: #1e1e1e;
        --control-bg: #2c2c2e;
        --separator: rgba(255, 255, 255, .1);
        --shadow-pop: 0 8px 28px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .15);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: var(--font);
    font-size: 13px;
    color: var(--label);
    background: var(--window-bg);
    -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; color: inherit; }
input, textarea { font-family: inherit; color: var(--label); }
[hidden] { display: none !important; }
svg.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- window chrome ---------- */
.app { display: flex; flex-direction: column; height: 100vh; min-height: 560px; }
.tabbar { display: flex; align-items: stretch; height: 58px; border-bottom: 1px solid var(--separator); background: var(--chrome-bg); flex: none; }
.tabbar .brand { display: flex; align-items: center; gap: 8px; padding: 0 20px; font-size: 19px; font-weight: 600; letter-spacing: -.2px; text-decoration: none; color: var(--label); }
.tabbar .brand .dot { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #5aa0ff, #2463d8); }
.tile { display: flex; align-items: center; gap: 10px; padding: 0 22px; min-width: 186px; border-left: 1px solid var(--separator); color: var(--label); text-decoration: none; }
.tile:last-of-type { border-right: 1px solid var(--separator); }
.tile.active { background: var(--group-fill); }
.tile .t1 { font-size: 16px; line-height: 19px; }
.tile .t2 { font-size: 12px; color: var(--secondary-label); line-height: 14px; }
.tile svg.ic { width: 20px; height: 20px; color: var(--secondary-label); }
.tabbar .spacer { flex: 1; }
.tabbar .tools { display: flex; align-items: center; gap: 14px; padding: 0 18px; }
.tabbar .tools button { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--label); border-radius: 6px; }
.tabbar .tools button:hover { background: var(--hover-fill); }

.subtop { display: flex; align-items: center; height: 60px; padding: 0 24px; border-bottom: 1px solid var(--separator); background: var(--chrome-bg); flex: none; gap: 16px; }
.subtop .grow { flex: 1; }

.content { flex: 1; min-height: 0; overflow: auto; position: relative; }

.infobar { display: flex; align-items: center; height: 56px; padding: 0 24px; border-top: 1px solid var(--separator); background: var(--chrome-bg); gap: 10px; flex: none; }
.infobar .logo { display: flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 600; letter-spacing: -.3px; margin-right: 12px; }
.infobar .logo .dot { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #5aa0ff, #2463d8); }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 4px; font-size: 12px; font-weight: 600; letter-spacing: .4px; color: #fff; text-transform: uppercase; border: 0; cursor: pointer; }
.badge.blue { background: #5b7fc7; }
.badge.green { background: #6cc068; }
.infobar .grow { flex: 1; }
.infobar .credits { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.infobar .credits .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.infobar .link { margin-left: 14px; }

/* ---------- segmented control (Dial / History / Help) ---------- */
.segmented { display: inline-flex; background: var(--group-fill); border-radius: 7px; padding: 2px; gap: 2px; }
.segmented button { min-width: 96px; height: 28px; border: 0; border-radius: 6px; background: transparent; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--label); }
.segmented button:hover:not(.on) { background: var(--hover-fill); }
.segmented button.on { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }

/* ---------- buttons (ButtonStyle) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 6px; border: 0; font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.btn.small { height: 26px; font-size: 12px; padding: 0 12px; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.secondary { background: var(--adaptive-gray); color: #fff; }
.btn.quiet { background: var(--window-bg); color: var(--adaptive-gray); box-shadow: inset 0 0 0 1.5px var(--adaptive-gray); }
.btn.accent-quiet { background: var(--control-bg); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { filter: brightness(.85); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.danger { background: var(--red); color: #fff; }
.link { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 500; cursor: pointer; font-size: inherit; }
.link:hover { text-decoration: underline; }

/* ---------- switch (NSSwitch) ---------- */
.switch { position: relative; width: 44px; height: 26px; flex: none; border-radius: 13px; background: rgba(120, 120, 128, .24); border: 0; padding: 0; cursor: pointer; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(18px); }
.switch:disabled { opacity: .5; cursor: default; }

/* ---------- cards and rows ---------- */
.card { border: 1px solid var(--card-border); border-radius: var(--r-xl); padding: 4px 0; background: var(--window-bg); }
.card > .row + .row { border-top: 1px solid var(--card-border); }
.card > .row + .row { margin: 0 16px; padding-left: 0; padding-right: 0; }
.card > .row + .row .row-icon { margin-left: 0; }
.row { display: flex; align-items: center; min-height: 52px; padding: 9px 16px; gap: 14px; }
.row-icon { width: 26px; display: flex; justify-content: center; flex: none; color: var(--label); }
.row-icon svg.ic { width: 18px; height: 18px; }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-size: 14px; font-weight: 500; }
.row-hint { font-size: 12px; color: var(--label); }
.row-control { flex: none; display: flex; align-items: center; }

/* ---------- picker buttons (PhoneCallPickerButton) ---------- */
.pick-field { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--card-border); background: transparent; font-size: 13px; cursor: pointer; text-align: left; width: 100%; }
.pick-field.filled { background: var(--group-fill); }
.pick-field:hover:not(:disabled) { background: var(--hover-fill); }
.pick-field.filled:hover:not(:disabled) { background: var(--group-fill); filter: brightness(.97); }
.pick-field .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-field svg.ic { width: 12px; height: 12px; stroke-width: 2; }
.pick-field.open { border-color: rgba(66, 112, 192, .6); color: var(--active-blue); }
.pick-field:disabled { opacity: .5; cursor: default; }
.pick-inline { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; border-radius: 6px; border: 0; background: transparent; cursor: pointer; font-weight: 600; max-width: 100%; }
.pick-inline:hover { background: var(--hover-fill); }
.pick-inline .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-inline svg.ic { width: 12px; height: 12px; stroke-width: 2; flex: none; }

/* ---------- picker popup (LanguagePickerPopup) ---------- */
.popup { position: fixed; z-index: 50; background: var(--window-bg); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 10px; max-height: 70vh; display: flex; flex-direction: column; }
.popup .search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 8px; border: 2px solid var(--accent); margin-bottom: 12px; flex: none; }
.popup .search svg.ic { width: 17px; height: 17px; color: var(--secondary-label); }
.popup .search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; }
.popup .list { overflow: auto; display: grid; gap: 0 8px; align-content: start; }
.popup .section-title { grid-column: 1 / -1; height: 28px; display: flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--secondary-label); padding: 0 10px; }
.popup .section-gap { grid-column: 1 / -1; height: 12px; }
.popup .item { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 24px; border-radius: 6px; font-size: 15px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; min-width: 190px; border: 0; background: transparent; text-align: left; }
.popup .item:hover, .popup .item.kb { background: var(--hover-fill); }
.popup .item.sel { background: var(--subtle-blue-back); }
.popup .item.sel::before { content: "✓"; position: absolute; left: 8px; font-size: 13px; }
.popup .item .sub { color: var(--secondary-label); }
.popup .empty { padding: 12px; color: var(--secondary-label); }

/* ---------- sheets and alerts ---------- */
.backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .25); display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; }
.sheet { background: var(--window-bg); border-radius: 12px; box-shadow: var(--shadow-pop); max-width: calc(100vw - 32px); max-height: 80vh; overflow: auto; }
.alert { width: 360px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.alert .icon { width: 48px; height: 48px; }
.alert h3 { margin: 0; font-size: 14px; font-weight: 700; }
.alert p { margin: 0; font-size: 12px; line-height: 1.4; }
.alert .buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.alert .buttons .btn { height: 28px; font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); background: rgba(30, 30, 30, .92); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; z-index: 60; max-width: 80vw; }

.field-input { height: 28px; border-radius: 6px; border: 1px solid var(--card-border); padding: 0 8px; font-size: 13px; background: var(--text-bg); outline: none; width: 100%; }
.field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(66, 112, 192, .25); }

.spinner { width: 16px; height: 16px; border: 2px solid var(--tertiary-label); border-top-color: var(--secondary-label); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* narrow screens: the two columns stack */
@media (max-width: 900px) {
    .tabbar .tile:not(.active), .tabbar .tools { display: none; }
    .tile { min-width: 0; }
    .subtop { padding: 0 16px; height: auto; min-height: 56px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
    .segmented button { min-width: 72px; }
    .infobar { padding: 0 16px; }
}