/* ===== HEADER CONTROLS ===== */
.header-ctrl{
  height:42px;padding:0 14px;
  border:1px solid rgba(255,255,255,.7);border-radius:12px;
  background:rgba(255,255,255,.88);color:#2F2B4D;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;font-weight:600;
  box-shadow:0 6px 18px rgba(65,55,120,.08);
  transition:all .2s var(--ease-btn);cursor:pointer;
  white-space:nowrap;
}
.header-ctrl i{font-size:14px;color:#5148B8;flex:0 0 auto;transition:all .2s var(--ease-btn)}
.header-ctrl:hover{
  background:#fff;border-color:#DDD8F0;color:#5148B8;
  transform:translateY(-1px);box-shadow:0 8px 22px rgba(65,55,120,.14);
}
.header-ctrl:hover i{color:#5148B8}
.header-ctrl:active{transform:scale(.97) translateY(0)}
.header-ctrl:focus-visible{outline:2px solid #5148B8;outline-offset:2px}

/* ===== LANGUAGE SWITCH ===== */
.lang-switch{
  height:40px;padding:3px;width:116px;
  display:grid;grid-template-columns:1fr 1fr;gap:3px;
  border:1px solid rgba(255,255,255,.7);border-radius:12px;
  background:rgba(255,255,255,.90);
  box-shadow:0 6px 18px rgba(65,55,120,.08);
}
.lang-switch button{
  width:100%;height:100%;border:0;border-radius:9px;
  background:transparent;color:#55546A;font-size:11.5px;font-weight:700;
  padding:0 6px;
  transition:all .18s var(--ease-btn);cursor:pointer;white-space:nowrap;
}
.lang-switch button:hover:not(.active){color:#5148B8}
.lang-switch button.active{
  background:linear-gradient(135deg,#5148B8,#6256D4);color:#fff;
}

/* ===== CARDS ===== */
.card{
  width:100%;margin-top:18px;padding:25px 20px;
  background:var(--card);border:1px solid rgba(231,227,243,.9);
  border-radius:28px;box-shadow:var(--shadow);
}
/* Outer page surfaces merge with the body — no separation from the header */
.app > section.card{
  margin-top:0;padding:6 4px 12px;
  background:transparent;border:0;box-shadow:none;border-radius:0;
}

/* ===== HOME PAGE ===== */
.home-page{
  text-align:center;
  padding-top:32px;
  padding-bottom:4px;
  display:flex;flex-direction:column;
}

/* Hero */
.hero{
  display:flex;flex-direction:column;align-items:center;
  padding:16px 0 0;
}
.hero-mic-wrap{
  position:relative;width:72px;height:72px;
  display:grid;place-items:center;
}
.hero-mic-ring{
  position:absolute;inset:-8px;border-radius:50%;
  border:1.5px solid rgba(67,56,202,.10);
  animation:ringPulse 3s ease-in-out infinite;
}
.hero-mic-ring-2{
  inset:-18px;border-color:rgba(67,56,202,.05);
  animation-delay:1s;
}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.06);opacity:1}}

.hero-mic{
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;font-size:22px;
  background:var(--purple);
  box-shadow:0 6px 20px rgba(67,56,202,.25);
  position:relative;z-index:1;
}

.hero-title{
  margin:18px 0 0;
  font-size:clamp(22px,6.5vw,30px);
  line-height:1.2;font-weight:800;
  white-space:nowrap;
  display:flex;gap:.30em;align-items:baseline;justify-content:center;flex-wrap:nowrap;
}
.brand-dark{color:#1E2438}
.brand-accent{color:var(--purple2)}

.hero-sub{
  max-width:min(380px,88%);
  margin:8px auto 0;
  color:var(--muted);
  font-size:clamp(12px,3.2vw,14px);
  line-height:1.6;
}

.hero-waveform{
  display:flex;align-items:center;justify-content:center;
  gap:3px;height:24px;margin:16px 0 0;
}
.wave-bar{
  width:2.5px;border-radius:999px;
  background:var(--purple2);
  opacity:.35;
}
.wave-center{opacity:.6}

/* Home Actions */
.home-actions{
  margin-top:24px;
  display:flex;flex-direction:column;gap:12px;
  padding:0;
}

/* Primary Card */
.home-card-primary{
  width:100%;min-height:110px;
  border:0;border-radius:18px;
  padding:20px;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  transition:all .28s var(--ease-btn);cursor:pointer;
  position:relative;overflow:hidden;
}
.home-card-primary::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 60%);
  pointer-events:none;
}
.home-card-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(67,56,202,.28);
}
.home-card-primary:active{transform:scale(.98) translateY(0)}
.home-card-primary:focus-visible{outline:2px solid var(--purple2);outline-offset:3px}

.hcp-content{
  display:flex;align-items:center;gap:14px;
  position:relative;z-index:1;
}
.hcp-icon{
  width:48px;height:48px;flex:0 0 48px;
  border-radius:14px;
  display:grid;place-items:center;font-size:20px;
  background:rgba(255,255,255,.18);
}
.hcp-text{display:flex;flex-direction:column;gap:3px;text-align:center}
.hcp-title{font-size:clamp(15px,4vw,18px);font-weight:700;line-height:1.3}
.hcp-desc{font-size:clamp(11px,2.8vw,12.5px);font-weight:500;opacity:.8;line-height:1.5}
.hcp-arrow{
  display:none;
}

/* Secondary Grid */
.home-secondary-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}

/* Secondary Cards */
.home-card-secondary{
  min-height:150px;
  border:1px solid var(--line);border-radius:18px;
  background:var(--white);
  padding:20px 16px 16px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:all .25s var(--ease-btn);cursor:pointer;
  position:relative;
}
.home-card-secondary:hover{
  border-color:rgba(67,56,202,.20);
  box-shadow:0 6px 18px rgba(67,56,202,.06);
  transform:translateY(-1px);
}
.home-card-secondary:active{transform:scale(.98)}
.home-card-secondary:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

.hcs-icon{
  width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;font-size:20px;
  margin-bottom:14px;
}
.hcs-icon-join{background:rgba(67,56,202,.08);color:var(--purple)}
.hcs-icon-rooms{background:rgba(124,92,252,.08);color:var(--purple2)}

.hcs-title{
  font-size:clamp(13px,3.5vw,15px);font-weight:700;color:var(--text);
  line-height:1.3;margin-bottom:4px;
}
.hcs-desc{
  font-size:clamp(10px,2.6vw,11.5px);color:var(--muted);line-height:1.5;
}

/* ===== SHARED BUTTON CLASSES (join/rooms pages) ===== */
.big{
  width:100%;min-height:52px;
  border:0;border-radius:14px;padding:14px 18px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-align:start;font-size:14px;font-weight:700;
  transition:all .25s var(--ease-btn);cursor:pointer;
}
.big:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.primary{
  color:#fff;background:var(--purple);
  box-shadow:0 8px 24px rgba(67,56,202,.22);
}
.primary:hover{box-shadow:0 12px 30px rgba(67,56,202,.30)}
.button-icon{
  width:40px;height:40px;flex:0 0 40px;
  border-radius:11px;display:grid;place-items:center;font-size:17px;
  background:rgba(255,255,255,.18);
}
.big.loading{color:transparent!important;pointer-events:none;position:relative}
.big.loading::before{
  content:'';position:absolute;width:18px;height:18px;
  top:50%;left:50%;margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:btn-spin .6s linear infinite;
}

/* ===== CONTROL BUTTONS ===== */
.control{
  min-height:56px;border:1.5px solid var(--line);border-radius:16px;background:#fff;
  color:var(--text);font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .25s var(--ease-btn);cursor:pointer;
}
.control i{font-size:16px;color:var(--purple);transition:transform .2s var(--ease-btn)}
.control:hover{
  background:linear-gradient(135deg,var(--soft-purple),#f5f1ff);
  border-color:rgba(101,87,233,.3);
  transform:translateY(-2px);box-shadow:0 8px 20px rgba(101,87,233,.13);
}
.control:hover i{transform:scale(1.12)}
.control:active{transform:scale(.97);box-shadow:none}
.control:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

/* ===== STOP BUTTON ===== */
.controls .control-stop{grid-column:1/-1}
.control-stop{
  background:linear-gradient(135deg,#fff0f3,#fff4f7);border-color:#f1d4dd;
  color:#c54d6e;
}
.control-stop i{color:#c54d6e}
.control-stop:hover{
  background:linear-gradient(135deg,#ffe8ed,#fff0f4);
  border-color:#e8b4c0;
  box-shadow:0 8px 20px rgba(197,77,110,.13);
}

/* ===== SWAP BUTTON ===== */
.swap{
  width:100%;height:46px;margin-top:11px;
  border:1.5px solid rgba(101,87,233,.18);border-radius:13px;
  background:#fff;color:var(--purple);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 13px rgba(101,87,233,.08);
  transition:all .25s var(--ease-btn);cursor:pointer;
}
.swap i{font-size:14px;transition:transform .25s var(--ease-btn)}
.swap:hover{
  background:var(--soft-purple);border-color:rgba(101,87,233,.3);
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(101,87,233,.16);
}
.swap:hover i{transform:rotate(180deg)}
.swap:active{transform:scale(.97)}
.swap:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

/* ===== END SESSION BUTTON ===== */
.end{
  flex:0 0 auto;
  width:100%;min-height:52px;margin-top:10px;
  border:1.5px solid #f1d4dd;border-radius:15px;
  background:#fff4f7;color:#c54d6e;font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .25s var(--ease-btn);cursor:pointer;
}
.end i{font-size:15px;transition:transform .2s var(--ease-btn)}
.end:hover{
  background:linear-gradient(135deg,#ffe8ed,#fff0f4);
  border-color:#e8b4c0;
  transform:translateY(-1px);box-shadow:0 8px 22px rgba(197,77,110,.16);
}
.end:hover i{transform:scale(1.12)}
.end:active{transform:scale(.97)}
.end:focus-visible{outline:2px solid #c54d6e;outline-offset:2px}

/* ===== NOTES + FIELDS ===== */
.note{margin:14px auto 0;max-width:520px;text-align:center;color:var(--muted);font-size:10.5px;line-height:1.8}
.field{max-width:520px;margin:14px auto}
.field:has(.seg-control){max-width:none;margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
.field label{display:block;text-align:center;font-size:11.5px;font-weight:600;margin-bottom:7px}
.field input:not(.range){
  width:100%;height:52px;padding:0 14px;border:1px solid var(--line);
  border-radius:14px;background:#fff;direction:ltr;color:var(--text);
  transition:border-color .2s var(--ease-btn),box-shadow .2s var(--ease-btn);
}
.field input:not(.range):focus{
  border-color:var(--purple);box-shadow:0 0 0 3px rgba(101,87,233,.12);outline:none;
}
.range{width:100%;accent-color:var(--purple)}

/* ===== SEGMENTED CONTROL (Voice gender) ===== */
.seg-control{
  display:flex;gap:5px;padding:3px;
  background:#f0ecff;border:1px solid #e2def6;border-radius:15px;
}
.seg-control button{
  flex:1 1 0;min-width:0;height:48px;padding:0 2px;
  border:0;border-radius:12px;
  background:transparent;color:var(--muted);
  font-size:12.5px;font-weight:700;font-family:inherit;
  white-space:nowrap;
  cursor:pointer;transition:all .25s var(--ease-btn);
}
.seg-control button:hover:not(.active){
  color:var(--purple);background:rgba(255,255,255,.6);
}
.seg-control button.active{
  background:linear-gradient(135deg,#5a4dd6,#6557e9);color:#fff;
  box-shadow:0 4px 14px rgba(90,77,214,.35);
}

/* ===== SETTINGS PAGE ===== */
.settings-page{overflow:hidden}
.settings-panel{
  margin-top:16px;padding:22px 20px;
  background:linear-gradient(160deg,#f5f3ff,#f0ecff 50%,#f7f5ff);
  border:1px solid #e8e3f5;border-radius:16px;
}
.settings-header{text-align:center;margin-bottom:0}
.settings-title{
  font-size:clamp(17px,5vw,20px);font-weight:700;color:#2d2a3e;
  margin:0 0 4px;
}
.settings-desc{
  font-size:11.5px;color:#6e6a82;margin:0 auto;line-height:1.7;
  white-space:nowrap;
}
.settings-divider{
  height:1px;background:#e8e3f5;margin:20px 0;
}
.settings-group{display:flex;flex-direction:column;gap:0}
.settings-label-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.settings-label{
  font-size:12.5px;font-weight:600;color:#3d3a50;
}
.settings-value{
  font-size:11.5px;font-weight:700;color:var(--purple);
  background:rgba(101,87,233,.08);padding:3px 10px;border-radius:6px;
}
.settings-test-btn{
  width:100%;height:46px;border:1.5px solid var(--line);border-radius:12px;
  background:#fff;color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12.5px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:all .22s var(--ease-btn);
}
.settings-test-btn i{font-size:16px;color:var(--purple)}
.settings-test-btn:hover{border-color:rgba(101,87,233,.25);background:#f9f7ff}
.settings-test-btn:active{transform:scale(.97)}
.join-page{overflow:hidden;display:flex;flex-direction:column;gap:0}
.join-header{
  text-align:center;
  padding:24px 20px 28px;
  margin:0 -16px;
  background:linear-gradient(160deg,#f0ecff,#ede8ff 50%,#f4f1ff);
  border-bottom:1px solid #e8e3f5;
}
.join-header-icon{
  width:48px;height:48px;border-radius:14px;margin:0 auto 12px;
  background:rgba(67,56,202,.08);color:var(--purple);
  display:grid;place-items:center;font-size:20px;
}
.join-title{
  font-size:clamp(18px,5vw,22px);font-weight:700;color:#1E2438;
  margin:0;
}
.join-form{
  padding:20px 0 0;
}
.join-label{
  display:block;font-size:11.5px;font-weight:600;color:#5a5672;
  margin-bottom:7px;text-align:center;
}
.join-input{
  width:100%;height:48px;padding:0 14px;
  border:1.5px solid var(--line);border-radius:12px;
  background:#fff;color:var(--text);
  font-size:13.5px;font-family:inherit;
  transition:border-color .2s;outline:none;
  box-sizing:border-box;text-align:center;
}
.join-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(67,56,202,.1)}
.join-input::placeholder{color:#b8b5c7}
.join-form .big{margin-top:16px}
.join-btn{justify-content:center;flex-direction:row-reverse}
html[dir="rtl"] .join-btn{flex-direction:row}
.rooms-page{overflow:hidden;display:flex;flex-direction:column;gap:0}
.rooms-header{
  text-align:center;
  padding:24px 20px 28px;
  margin:0 -16px;
  background:linear-gradient(160deg,#f0ecff,#ede8ff 50%,#f4f1ff);
  border-bottom:1px solid #e8e3f5;
}
.rooms-header-icon{
  width:100%;height:56px;border-radius:0;margin:0 0 14px;
  background:rgba(67,56,202,.06);color:var(--purple);
  display:grid;place-items:center;font-size:22px;
}
.rooms-title{
  font-size:clamp(18px,5vw,22px);font-weight:700;color:#1E2438;
  margin:0 0 6px;
}
.rooms-sub{
  font-size:12.5px;color:var(--muted);margin:0 auto 16px;line-height:1.7;
  max-width:300px;
}
.rooms-header .big{
  width:100%;
}

/* Room list */
.room-list{display:flex;flex-direction:column;gap:10px;margin-top:22px}

/* Empty state */
.rooms-empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:28px 16px;color:var(--muted);text-align:center;
}
.rooms-empty-icon{
  width:44px;height:44px;border-radius:12px;
  background:var(--soft-purple);color:var(--purple);
  display:grid;place-items:center;font-size:20px;
}
.rooms-empty-title{font-size:13px;font-weight:700;color:#5a5672}
.rooms-empty-sub{font-size:11px;line-height:1.6;max-width:240px}

/* Room card */
.room-card{
  padding:16px;border-radius:16px;
  background:#fff;border:1px solid var(--line);
  transition:all .2s var(--ease-btn);
}
.room-card:hover{border-color:rgba(101,87,233,.2);box-shadow:0 4px 14px rgba(101,87,233,.06)}
.room-card-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.room-card-icon{
  width:38px;height:38px;border-radius:10px;flex:0 0 38px;
  background:var(--soft-purple);color:var(--purple);
  display:grid;place-items:center;font-size:17px;
}
.room-card-info{flex:1;min-width:0}
.room-card-name{font-size:14px;font-weight:700;color:#2d2a3e;margin-bottom:2px}
.room-card-desc{font-size:11px;color:var(--muted)}
.room-card-url{
  font-size:10px;color:#9a95ad;font-family:monospace;
  direction:ltr;text-align:left;
  background:#f5f4f9;padding:6px 10px;border-radius:8px;
  margin-bottom:12px;word-break:break-all;
}
.room-card-join{
  width:100%;height:42px;border:0;border-radius:10px;
  background:linear-gradient(135deg,#6557e9,#7c6df0);color:#fff;
  font-size:12.5px;font-weight:700;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;transition:all .22s var(--ease-btn);margin-bottom:8px;
}
.room-card-join i{font-size:14px}
.room-card-join:hover{box-shadow:0 8px 20px rgba(101,87,233,.3);transform:translateY(-1px)}
.room-card-join:active{transform:scale(.97)}
.room-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.room-card-secondary{
  height:36px;border:1.5px solid var(--line);border-radius:8px;
  background:#fff;color:var(--text);
  font-size:11px;font-weight:600;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;transition:all .2s var(--ease-btn);
}
.room-card-secondary i{font-size:12px}
.room-card-secondary:hover{border-color:rgba(101,87,233,.25);background:#f9f7ff}
.room-card-secondary:active{transform:scale(.97)}
.room-card-share{
  color:#4B5563;border-color:#E5E7EB;background:#F9FAFB;
}
.room-card-share i{color:#6B7280}
.room-card-share:hover{background:#F3F4F6;border-color:#D1D5DB;color:#374151}
.room-card-share:hover i{color:#4B5563}
.room-card-share:active{background:#E5E7EB}
.room-card-delete{
  color:#DC2626;border-color:#FECACA;background:#FEF2F2;
}
.room-card-delete i{color:#DC2626}
.room-card-delete:hover{background:#FEE2E2;border-color:#FECACA;color:#B91C1C}
.room-card-delete:hover i{color:#B91C1C}

/* ===== MODAL ===== */
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(30,27,46,.45);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.modal-overlay.hidden{display:none!important}
.modal-card{
  width:100%;max-width:380px;padding:28px 22px 22px;
  border-radius:16px;background:#fff;
  box-shadow:0 16px 48px rgba(0,0,0,.12);
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.modal-icon{
  width:48px;height:48px;border-radius:13px;
  background:linear-gradient(135deg,#ede8ff,#e2dcff);
  color:var(--purple);display:grid;place-items:center;font-size:22px;
  margin-bottom:14px;
}
.modal-title{
  font-size:16px;font-weight:700;color:#2d2a3e;text-align:center;margin:0 0 4px;
}
.modal-sub{
  font-size:11.5px;color:var(--muted);text-align:center;margin:0 0 16px;line-height:1.6;
}
.modal-label{
  align-self:flex-start;font-size:11px;font-weight:600;color:#5a5672;
  margin-bottom:6px;
}
.modal-input{
  width:100%;height:46px;padding:0 14px;
  border:1.5px solid var(--line);border-radius:10px;
  background:#fafafe;color:var(--text);
  font-size:13.5px;font-family:inherit;
  transition:border-color .2s;outline:none;
}
.modal-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(101,87,233,.1)}
.modal-input::placeholder{color:#b8b5c7}
.modal-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  width:100%;margin-top:18px;
}
.modal-btn{
  height:44px;border:0;border-radius:10px;
  font-size:13px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:all .22s var(--ease-btn);
}
.modal-cancel{
  background:#f5f4f9;color:var(--text);border:1.5px solid var(--line);
}
.modal-cancel:hover{background:#ede8ff;border-color:rgba(101,87,233,.2)}
.modal-confirm{
  background:linear-gradient(135deg,#6557e9,#7c6df0);color:#fff;
  box-shadow:0 6px 18px rgba(101,87,233,.25);
}
.modal-confirm:hover{box-shadow:0 8px 24px rgba(101,87,233,.35)}
.modal-confirm:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}

/* ===== SESSION PAGE ===== */
.session-page{overflow:hidden;display:flex;flex-direction:column;gap:0}

/* ===== DIRECTION CARD ===== */
.direction-card{
  flex:0 0 auto;margin-top:0;padding:20px 20px 16px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  border-radius:0 0 16px 16px;
  background:linear-gradient(145deg,#ede8ff,#e8e2ff 40%,#f0ecff);
  border:1px solid #ddd8f0;border-top:0;
}
.direction-label{
  color:#8a80b0;font-size:10.5px;font-weight:600;letter-spacing:.3px;
  text-transform:uppercase;
}
.direction-value{
  font-size:20px;font-weight:700;color:#2d2a3e;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.direction-value .dir-source,
.direction-value .dir-target{
  font-size:20px;font-weight:700;
}
.direction-value .dir-arrow{
  font-size:22px;color:var(--purple);font-weight:700;
}
.swap-btn{
  margin-top:4px;padding:8px 16px;border:1.5px solid #d5d0e8;border-radius:8px;
  background:rgba(255,255,255,.7);color:var(--purple);
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;font-family:inherit;
  cursor:pointer;transition:all .2s var(--ease-btn);
}
.swap-btn i{font-size:14px;transition:transform .25s var(--ease-btn)}
.swap-btn:hover{background:#fff;border-color:rgba(101,87,233,.3);transform:translateY(-1px);box-shadow:0 4px 12px rgba(101,87,233,.1)}
.swap-btn:hover i{transform:rotate(180deg)}
.swap-btn:active{transform:scale(.97) translateY(0);box-shadow:none}
.swap-btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

/* ===== CONVERSATION MODE TOGGLE ===== */
.session-section{
  width:100%;margin-top:20px;
  display:flex;flex-direction:column;
  border-radius:16px;overflow:hidden;
  box-shadow:0 8px 24px rgba(67,56,202,.12);
}
.room-badge{
  flex:0 0 auto;height:44px;
  display:flex;align-items:center;justify-content:center;
  padding:0 14px;border-radius:16px 16px 0 0;
  font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#4338CA,#5145C7);
}
.conv-toggle{
  margin-top:12px;padding:14px 16px;
  border-radius:14px;background:linear-gradient(135deg,rgba(101,87,233,.05),rgba(122,109,241,.08));
  border:1px solid rgba(101,87,233,.12);
}
.conv-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.conv-toggle-info{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13px;font-weight:600}
.conv-toggle-info i{color:var(--purple);font-size:15px}
.conv-desc{margin:6px 0 0;font-size:11px;color:var(--muted);line-height:1.5}
.toggle-switch{
  position:relative;width:44px;height:24px;min-width:44px;
  border:0;border-radius:12px;cursor:pointer;
  background:rgba(101,87,233,.18);
  transition:background .25s var(--ease-btn);
}
.toggle-switch[aria-checked="true"]{background:linear-gradient(135deg,var(--purple),#7a6df1)}
.toggle-knob{
  position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);
  transition:transform .25s var(--ease-btn);
}
.toggle-switch[aria-checked="true"] .toggle-knob{transform:translateX(20px)}

/* ===== SESSION WORKSPACE ===== */
.session-workspace{
  flex:1;min-height:0;margin-top:16px;
  display:flex;flex-direction:column;
  border-radius:20px;background:#fff;border:1px solid var(--line);
  overflow:hidden;
}
.status-bar{
  flex:0 0 auto;padding:10px 14px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border-bottom:1px solid #f0ecff;
  color:var(--muted);font-size:11.5px;font-weight:600;
}
.dot{width:8px;height:8px;border-radius:50%;background:#c4c2d0;transition:all .3s var(--ease-btn)}
.dot.live{
  background:var(--purple);
  box-shadow:0 0 0 4px rgba(101,87,233,.14);
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(101,87,233,.14)}50%{box-shadow:0 0 0 8px rgba(101,87,233,.06)}}

/* Transcript */
.transcript{
  flex:1;min-height:120px;max-height:45svh;overflow:auto;
  padding:14px;
}
.msg{margin-bottom:12px}.msg:last-child{margin-bottom:0}
.tag{margin-bottom:4px;color:var(--muted);font-size:9.5px;font-weight:700}
.bubble,.translation{padding:11px 13px;border-radius:14px;font-size:12.5px;line-height:1.8}
.bubble{background:#f7f5fc;border:1px solid #ede9f7}
.interim-bubble{opacity:.55;font-style:italic}
.translation{margin-top:5px;background:#eef5ff}

/* ===== SESSION ACTION BUTTONS ===== */
.session-actions{
  flex:0 0 auto;margin-top:14px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;
}
.action-btn{
  height:52px;border:0;border-radius:14px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:clamp(10.5px,2.5vw,12.5px);font-weight:700;font-family:inherit;
  white-space:nowrap;
  cursor:pointer;transition:all .22s var(--ease-btn);
}
.action-btn i{font-size:16px;transition:transform .2s var(--ease-btn);flex:0 0 auto}
.action-btn:hover i{transform:scale(1.1)}
.action-btn:active{transform:scale(.97)}

/* Primary — Start Listening */
.action-primary{
  background:linear-gradient(135deg,#6557e9,#7c6df0);color:#fff;
  box-shadow:0 8px 22px rgba(101,87,233,.25);
}
.action-primary:hover{box-shadow:0 12px 30px rgba(101,87,233,.35)}
.action-primary i{color:#fff}

/* Danger — Stop Listening */
.action-danger{
  grid-column:1/-1;
  background:linear-gradient(135deg,#DC2626,#EF4444);color:#fff;
  border:0;
  box-shadow:0 8px 22px rgba(220,38,38,.28);
}
.action-danger:hover{background:linear-gradient(135deg,#B91C1C,#DC2626);box-shadow:0 10px 26px rgba(220,38,38,.36)}
.action-danger:active{background:#B91C1C}
.action-danger i{color:#fff}

/* Secondary — Repeat */
.action-secondary{
  background:#fff;color:var(--text);
  border:1.5px solid var(--line);
}
.action-secondary:hover{border-color:rgba(101,87,233,.25);background:#f9f7ff}
.action-secondary i{color:var(--purple)}

/* ===== END SESSION ===== */
.end-btn{
  flex:0 0 auto;width:100%;height:48px;margin-top:14px;
  border:0;border-radius:14px;
  background:linear-gradient(135deg,#B91C1C,#DC2626);color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:all .22s var(--ease-btn);font-family:inherit;
  box-shadow:0 8px 22px rgba(185,28,28,.25);
}
.end-btn i{font-size:14px;transition:transform .2s var(--ease-btn)}
.end-btn:hover{
  background:linear-gradient(135deg,#991B1B,#B91C1C);transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(185,28,28,.34);
}
.end-btn:hover i{transform:scale(1.1)}
.end-btn:active{background:#991B1B}
.end-btn:focus-visible{outline:2px solid #B91C1C;outline-offset:2px}

/* ===== TOAST ===== */
#toast{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  background:#242438;color:#fff;padding:12px 17px;border-radius:14px;
  max-width:90%;text-align:center;font-size:12px;font-weight:600;
  box-shadow:0 8px 25px rgba(0,0,0,.16);z-index:100;
}

/* ===== SHARE LINK ===== */
#shareLink{
  transition:all .2s var(--ease-btn);cursor:pointer;
}
#shareLink:hover{
  background:#f0ecff!important;border-color:rgba(101,87,233,.3)!important;
}

/* ===== BUTTON DISABLED STATE ===== */
.big:disabled,.action-btn:disabled,.header-ctrl:disabled,.swap-btn:disabled,.end-btn:disabled{
  opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important;
}
.big:disabled::after{display:none}

/* ===== BUTTON LOADING STATE ===== */
.big.loading,.action-btn.loading{
  color:transparent!important;pointer-events:none;position:relative;
}
.big.loading i,.action-btn.loading i{color:transparent!important}
.big.loading::before,.action-btn.loading::before{
  content:'';position:absolute;width:18px;height:18px;
  top:50%;left:50%;margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:btn-spin .6s linear infinite;
}
.action-primary.loading::before{
  border-color:rgba(255,255,255,.3);border-top-color:#fff;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}