/* panes */
.panes{display:grid;grid-template-columns:1fr 1px 1fr;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden}
.seam{background:var(--grad);opacity:.55}
.pane{display:flex;flex-direction:column;min-width:0}
.pane-h,.pane-f{display:flex;align-items:center;gap:4px;padding:8px 12px;min-height:48px;flex-wrap:wrap}
.pane-h{border-bottom:1px solid var(--border)}
.pane-f{border-top:1px solid var(--border)}
.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.meta{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
textarea{width:100%;border:0;background:transparent;resize:vertical;padding:16px;min-height:280px;font-size:17px;line-height:1.7;outline:none;display:block}
textarea[readonly]{color:var(--text)}
textarea::placeholder{color:var(--faint)}
@media(max-width:780px){.panes{grid-template-columns:1fr}.seam{height:1px}textarea{min-height:170px}}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:18px;width:100%;max-width:100%;box-sizing:border-box;min-width:0}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hint{color:var(--muted);font-size:13.5px;margin:0}
.offline-model-hint{font-size:12px;color:var(--muted);line-height:1.2;margin:0;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0;flex-shrink:1}
.hub-pill.auto-used{background:rgba(56,189,248,0.15);color:var(--accent);font-weight:600}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:100%;box-sizing:border-box;border:1.5px dashed var(--border2);border-radius:var(--r-m);padding:36px 18px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s;min-width:0}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-dim)}
.drop strong{font-family:var(--display);font-size:18px;line-height:1.3;display:block;margin-bottom:6px;text-align:center;max-width:100%;word-break:break-word;overflow-wrap:break-word}
.drop .hint{font-size:13.5px;color:var(--muted);display:block;text-align:center;max-width:100%;word-break:break-word;overflow-wrap:break-word}
.prog{height:4px;background:var(--surface2);border-radius:4px;overflow:hidden;margin-top:12px}
.prog i{display:block;height:100%;width:0;background:var(--grad);transition:width .25s var(--ease)}

/* subtitle & cues */
.sub-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 18px 45px rgba(0,0,0,.35);width:100%;max-width:100%;box-sizing:border-box;min-width:0}
@media(max-width:640px){.sub-card{padding:12px 10px;border-radius:var(--r-s)}}
.sub-toolbar{display:flex;flex-direction:column;gap:12px;margin-top:0;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r-s);padding:14px 18px;width:100%;max-width:100%;box-sizing:border-box;min-width:0}
.sub-bar-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sub-file-meta{display:flex;align-items:center;gap:10px;min-width:0}
.sub-bar-style{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sub-bar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sub-notice{font-family:var(--body);font-size:12.5px;color:var(--warn);background:rgba(255,180,74,.08);border:1px solid rgba(255,180,74,.25);padding:4px 10px;border-radius:6px;flex:1;min-width:0;max-width:100%}
.sub-prog-wrap{margin-top:12px}
.sub-prog-wrap .prog{height:6px;background:var(--surface2);border-radius:999px;overflow:hidden}
.sub-prog-meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-family:var(--mono);font-size:11px;color:var(--faint)}

.cues{margin-top:14px;border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden;max-height:60vh;overflow-y:auto;background:var(--surface);position:relative}
.cues-header{display:grid;grid-template-columns:52px 160px 1fr 1fr;background:var(--surface2);border-bottom:2px solid var(--border2);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);position:sticky;top:0;z-index:5}
.cues-header>*{padding:10px 12px;font-weight:600;min-width:0}
.cues-header .tm{text-align:center}
.cue{display:grid;grid-template-columns:52px 160px 1fr 1fr;border-bottom:1px solid var(--border);font-size:14px;transition:background .15s}
.cue:last-child{border-bottom:0}
.cue:hover{background:rgba(255,255,255,.015)}
.cue-meta-row{display:contents}
.cue .n{font-family:var(--mono);font-size:11.5px;color:var(--faint);padding:10px 12px;display:flex;align-items:flex-start}
.cue .tm{font-family:var(--mono);font-size:11.5px;color:var(--faint);padding:10px 12px;text-align:center;direction:ltr!important;white-space:nowrap}
.cue .o{color:var(--muted);padding:10px 12px;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:start}
.cue .tr{padding:10px 12px;border-inline-start:1px solid var(--border);outline:none;min-height:38px;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:start}
.cue .tr:focus{background:var(--accent-dim);border-radius:4px}
.cue .tr:empty::before{content:"—";color:var(--faint)}

@media(max-width:780px){
  .cues-header{display:none}
  .cue{display:flex;flex-direction:column;padding:12px;gap:8px}
  .cue-meta-row{display:flex;align-items:center;justify-content:space-between;width:100%}
  .cue .n{padding:0;color:var(--accent);font-weight:700}
  .cue .tm{padding:0;color:var(--cyan);text-align:start}
  .cue .o{padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px}
  .cue .tr{padding:9px 12px;border-inline-start:0;background:var(--accent-dim);border:1px solid var(--accent-line);border-radius:8px;min-height:44px}
  .sub-bar-actions{width:100%}
  .sub-bar-actions .btn{flex:1;min-width:130px;justify-content:center}
}

/* lists */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:14px}
.res h4{margin:0 0 8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);font-weight:500;display:flex;gap:8px;align-items:center}
.res p{margin:0 0 10px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px}
.chk{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--border2);border-radius:999px;cursor:pointer;font-size:13px}
.chk input{accent-color:var(--accent)}
.item{display:grid;gap:4px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer}
.item:hover{background:var(--accent-dim)}
.item .a{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:8px}
.bubbles{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.bub{max-width:82%;padding:12px 14px;border-radius:14px;background:var(--surface2);border:1px solid var(--border)}
.bub.b{align-self:flex-end;background:var(--accent-dim);border-color:var(--accent-line)}
.bub small{display:block;color:var(--muted);font-size:13px;margin-bottom:2px}
.bub div{font-size:17px}
.micbig{flex:1;min-height:64px;justify-content:center;font-size:15px}

/* modal */
html.is-phone #closeSet {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  cursor: pointer !important;
}

html.is-phone #btnSaveDone {
  min-height: 44px !important;
}

/* Phone Navigation (ITEM 3) */
html:not(.is-phone) #phoneBottomNav,
html:not(.is-phone) #phoneMoreSheet,
html:not(.is-phone) #phoneSheetBackdrop {
  display: none !important;
}

html.is-phone .sidebar,
html.is-phone #sidebarToggleBtn {
  display: none !important;
}

html.is-phone .main-viewport {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}

#phoneBottomNav,
html.is-phone #phoneBottomNav {
  display: flex !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background-color: var(--phone-nav-bg, #071022) !important;
  background: var(--phone-nav-bg, #071022) !important;
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.3);
  z-index: 900;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: content-box;
  justify-content: space-around;
  align-items: center;
}

[data-theme="platinum-blue"] #phoneBottomNav { background-color: #F4F9FF !important; }
[data-theme="champagne-minimal"] #phoneBottomNav { background-color: #FBF7F1 !important; }
[data-theme="dracula"] #phoneBottomNav { background-color: #282A36 !important; }
[data-theme="rose-titanium"] #phoneBottomNav { background-color: #20111B !important; }
[data-theme="royal-amethyst"] #phoneBottomNav { background-color: #150D2C !important; }
[data-theme="obsidian-gold"] #phoneBottomNav { background-color: #11100D !important; }
[data-theme="makan-lab"] #phoneBottomNav { background-color: #071022 !important; }

.phone-nav-btn,
html.is-phone .phone-nav-btn {
  flex: 1;
  min-height: 48px;
  height: 100%;
  background: transparent;
  border: 0;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px 2px;
  font-family: inherit;
  font-size: 11px;
  transition: color 0.15s, background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.phone-nav-btn:hover,
html.is-phone .phone-nav-btn:hover {
  color: var(--text);
}

.phone-nav-btn.on,
.phone-nav-btn[aria-selected="true"],
#phoneBottomNav .phone-nav-btn.on,
#phoneBottomNav .phone-nav-btn[aria-selected="true"],
html.is-phone .phone-nav-btn.on,
html.is-phone .phone-nav-btn[aria-selected="true"] {
  color: var(--phone-nav-active, var(--accent)) !important;
  font-weight: 600;
}

html[data-theme="platinum-blue"] .phone-nav-btn.on,
html[data-theme="platinum-blue"] .phone-nav-btn[aria-selected="true"],
[data-theme="platinum-blue"] .phone-nav-btn.on,
[data-theme="platinum-blue"] .phone-nav-btn[aria-selected="true"],
[data-theme="platinum-blue"] #phoneBottomNav .phone-nav-btn.on {
  color: #0C4FAE !important;
}

html[data-theme="champagne-minimal"] .phone-nav-btn.on,
html[data-theme="champagne-minimal"] .phone-nav-btn[aria-selected="true"],
[data-theme="champagne-minimal"] .phone-nav-btn.on,
[data-theme="champagne-minimal"] .phone-nav-btn[aria-selected="true"],
[data-theme="champagne-minimal"] #phoneBottomNav .phone-nav-btn.on {
  color: #754817 !important;
}

html[data-theme="dracula"] .phone-nav-btn.on,
html[data-theme="dracula"] .phone-nav-btn[aria-selected="true"],
[data-theme="dracula"] .phone-nav-btn.on,
[data-theme="dracula"] .phone-nav-btn[aria-selected="true"],
[data-theme="dracula"] #phoneBottomNav .phone-nav-btn.on {
  color: #BD93F9 !important;
}

html[data-theme="rose-titanium"] .phone-nav-btn.on,
html[data-theme="rose-titanium"] .phone-nav-btn[aria-selected="true"],
[data-theme="rose-titanium"] .phone-nav-btn.on,
[data-theme="rose-titanium"] .phone-nav-btn[aria-selected="true"],
[data-theme="rose-titanium"] #phoneBottomNav .phone-nav-btn.on {
  color: #E187B1 !important;
}

html[data-theme="royal-amethyst"] .phone-nav-btn.on,
html[data-theme="royal-amethyst"] .phone-nav-btn[aria-selected="true"],
[data-theme="royal-amethyst"] .phone-nav-btn.on,
[data-theme="royal-amethyst"] .phone-nav-btn[aria-selected="true"],
[data-theme="royal-amethyst"] #phoneBottomNav .phone-nav-btn.on {
  color: #A873F0 !important;
}

html[data-theme="obsidian-gold"] .phone-nav-btn.on,
html[data-theme="obsidian-gold"] .phone-nav-btn[aria-selected="true"],
[data-theme="obsidian-gold"] .phone-nav-btn.on,
[data-theme="obsidian-gold"] .phone-nav-btn[aria-selected="true"],
[data-theme="obsidian-gold"] #phoneBottomNav .phone-nav-btn.on {
  color: #E0B75A !important;
}

html[data-theme="makan-lab"] .phone-nav-btn.on,
html[data-theme="makan-lab"] .phone-nav-btn[aria-selected="true"],
[data-theme="makan-lab"] .phone-nav-btn.on,
[data-theme="makan-lab"] .phone-nav-btn[aria-selected="true"],
[data-theme="makan-lab"] #phoneBottomNav .phone-nav-btn.on {
  color: #08A8FF !important;
}

html.is-phone .phone-nav-btn .phone-nav-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Phone More Sheet Backdrop */
html.is-phone .phone-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  z-index: 950;
  display: none !important;
}
html.is-phone #phoneSheetBackdrop.open,
html.is-phone .phone-sheet-backdrop.open {
  display: block !important;
}

/* Phone More Bottom Sheet */
html.is-phone .phone-more-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--panel, var(--surface, #071022));
  border-top: 1px solid var(--border2);
  border-radius: var(--r-l, 16px) var(--r-l, 16px) 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55);
  z-index: 960;
  padding: 12px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-height: 80vh;
  overflow-y: auto;
  box-sizing: border-box;
  display: none !important;
  flex-direction: column;
}
html.is-phone #phoneMoreSheet.open,
html.is-phone .phone-more-sheet.open {
  display: flex !important;
}

html.is-phone .phone-more-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--border2, #444);
  align-self: center;
  margin-bottom: 10px;
}

html.is-phone .phone-more-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

html.is-phone .phone-more-sheet-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

html.is-phone .phone-more-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

html.is-phone .phone-sheet-item {
  min-height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: var(--r-m, 10px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  text-align: start;
  box-sizing: border-box;
  transition: background-color 0.15s, color 0.15s;
}

html.is-phone .phone-sheet-item:hover,
html.is-phone .phone-sheet-item:active {
  background: var(--surface, rgba(255, 255, 255, 0.05));
}

html.is-phone .phone-sheet-item.on {
  background: var(--accent-dim);
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight: 600;
}

html.is-phone .phone-sheet-item .phone-nav-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

/* Icon masks */
.phone-nav-icon-text {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
.phone-nav-icon-voice {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3C/svg%3E");
}
.phone-nav-icon-doc {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
}
.phone-nav-icon-media {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E");
}
.phone-nav-icon-more {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3C/svg%3E");
}
.phone-nav-icon-sub {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='3'/%3E%3Cpath d='M7 15h3'/%3E%3Cpath d='M14 15h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='3'/%3E%3Cpath d='M7 15h3'/%3E%3Cpath d='M14 15h3'/%3E%3C/svg%3E");
}
.phone-nav-icon-dict {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
}
.phone-nav-icon-idiom {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z'/%3E%3C/svg%3E");
}
.phone-nav-icon-cmp {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3C/svg%3E");
}
.phone-nav-icon-gls {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
}
.phone-nav-icon-hist {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
.phone-nav-icon-models {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m21 16-9 5-9-5V8l9-5 9 5v8Z'/%3E%3Cpath d='m3.27 6.96 8.73 4.88 8.73-4.88'/%3E%3Cpath d='M12 22.08V12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m21 16-9 5-9-5V8l9-5 9 5v8Z'/%3E%3Cpath d='m3.27 6.96 8.73 4.88 8.73-4.88'/%3E%3Cpath d='M12 22.08V12'/%3E%3C/svg%3E");
}
.phone-nav-icon-settings {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

/* Phone Header and Forms (ITEM 4) */
#phoneBrand {
  display: none !important;
}

html.is-phone #phoneBrand {
  display: flex !important;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

html.is-phone #phoneBrand .brand-logo {
  width: 28px;
  height: 28px;
}

html.is-phone #phoneBrand .brand-name {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

html.is-phone #topbar {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html.is-phone .topbar-lead,
html.is-phone .topbar-search-slot,
html.is-phone #btnScreenTrans,
html.is-phone #offBtn,
html.is-phone #openSet {
  display: none !important;
}

html.is-phone .topbar-ctrls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-inline-start: auto !important;
}

html.is-phone #uiLang {
  height: 44px !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
}

html.is-phone #topbarSettingsBtn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Prevent horizontal scroll on phones */
html.is-phone,
html.is-phone body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

html.is-phone .app-shell,
html.is-phone .main-viewport,
html.is-phone main.wrap,
html.is-phone .tab,
html.is-phone .card,
html.is-phone .bar,
html.is-phone .panes {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Controls sizing: min 44x44, text fields/selects font-size 16px */
html.is-phone input[type="text"],
html.is-phone input[type="search"],
html.is-phone input[type="password"],
html.is-phone select,
html.is-phone .unified-lang-box select.unified-select,
html.is-phone .engine-picker-select,
html.is-phone .engine-picker-model-select {
  height: 44px !important;
  min-height: 44px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
}

html.is-phone textarea {
  font-size: 16px !important;
}

html.is-phone .btn {
  min-height: 44px !important;
  box-sizing: border-box !important;
}

html.is-phone .btn.icon-only,
html.is-phone button.icon-only {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Language pair row: side by side with swap between */
html.is-phone .trans-bar .trans-lang-grp,
html.is-phone .voice-bar .voice-lang-grp {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

html.is-phone .trans-bar .trans-lang-grp .unified-lang-picker,
html.is-phone .voice-bar .voice-lang-grp .unified-lang-picker {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
}

html.is-phone #swap,
html.is-phone #vSwap {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin-bottom: 0 !important;
}

html.is-phone .unified-lang-box {
  height: 44px !important;
  min-height: 44px !important;
  min-width: 0 !important;
}

/* Unclipped Detect language and language display */
html.is-phone:not([dir="rtl"]) .unified-lang-box .lang-fa {
  display: none !important;
}
html.is-phone[dir="rtl"] .unified-lang-box .lang-en {
  display: none !important;
}
html.is-phone .unified-lang-box .lang-display-inner {
  font-size: 14px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Selects and inputs layout: 2-column grid or full-width rows */
html.is-phone .bar.trans-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}

html.is-phone .bar.trans-bar .grp label {
  white-space: nowrap !important;
  font-size: 12px !important;
  margin-bottom: 4px !important;
  display: block !important;
}

html.is-phone .trans-lang-grp {
  width: 100% !important;
  flex: 1 1 100% !important;
  order: 1 !important;
}

html.is-phone #tModeGrp {
  width: calc(50% - 5px) !important;
  flex: 0 0 calc(50% - 5px) !important;
  min-width: 0 !important;
  order: 2 !important;
}

html.is-phone #tMode {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
}

html.is-phone #tToneGrp {
  width: calc(50% - 5px) !important;
  flex: 0 0 calc(50% - 5px) !important;
  min-width: 0 !important;
  order: 3 !important;
}

html.is-phone #tone {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
}

html.is-phone #tEngineGrp {
  width: 100% !important;
  flex: 1 1 100% !important;
  min-width: 0 !important;
  order: 4 !important;
}

html.is-phone .text-engine-picker-host,
html.is-phone .engine-picker-main-row,
html.is-phone .engine-picker-select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html.is-phone #tSubjGrp {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  order: 5 !important;
}

html.is-phone #tSubjGrp label {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 4px !important;
  font-size: 12px !important;
}

html.is-phone #tSubject {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
}

html.is-phone .trans-bar .sp {
  display: none !important;
}

html.is-phone .trans-tm-grp {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  box-sizing: border-box !important;
  order: 6 !important;
}

/* Full width source and result cards */
html.is-phone .panes.trans-cards {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
}

html.is-phone .pane.trans-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.is-phone #tIn,
html.is-phone #tOut {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 140px !important;
}

/* Sticky action bar above bottom navigation */
.phone-sticky-action-bar {
  display: none !important;
}

html.is-phone .phone-sticky-action-bar {
  display: flex !important;
  position: fixed !important;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  left: 0 !important;
  right: 0 !important;
  height: 56px !important;
  background: var(--panel, var(--surface, #071022)) !important;
  border-top: 1px solid var(--border) !important;
  padding: 4px 12px !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 850 !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25) !important;
  box-sizing: border-box !important;
}

html.is-phone .phone-sticky-action-bar .btn,
html.is-phone #tGo,
html.is-phone #tStop,
html.is-phone #tCopy,
html.is-phone #tSpeak {
  min-height: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.is-phone #tGo kbd {
  display: none !important;
}

html.is-phone [hidden],
html.is-phone #tStop[hidden] {
  display: none !important;
}

html.is-phone #tGo,
html.is-phone #tStop {
  flex: 2 1 auto !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

html.is-phone #tCopy,
html.is-phone #tSpeak {
  flex: 1 1 auto !important;
  font-size: 14px !important;
}

html.is-phone .main-viewport {
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Offline icon in More sheet */
.phone-nav-icon-off {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M1 1l22 22'/%3E%3Cpath d='M16.72 11.06A10.94 10.94 0 0 1 19 12.55'/%3E%3Cpath d='M5 12.55a10.94 10.94 0 0 1 5.17-2.39'/%3E%3Cpath d='M10.71 5.05A16 16 0 0 1 22.58 9'/%3E%3Cpath d='M1.42 9a15.91 15.91 0 0 1 4.7-2.88'/%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'/%3E%3Cline x1='12' y1='20' x2='12.01' y2='20'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M1 1l22 22'/%3E%3Cpath d='M16.72 11.06A10.94 10.94 0 0 1 19 12.55'/%3E%3Cpath d='M5 12.55a10.94 10.94 0 0 1 5.17-2.39'/%3E%3Cpath d='M10.71 5.05A16 16 0 0 1 22.58 9'/%3E%3Cpath d='M1.42 9a15.91 15.91 0 0 1 4.7-2.88'/%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'/%3E%3Cline x1='12' y1='20' x2='12.01' y2='20'/%3E%3C/svg%3E");
}

/* Voice Phone Styles (ITEM 5) */
.v-phone-options-btn {
  display: none !important;
}

html.is-phone .v-phone-options-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 0 12px !important;
  margin-inline-start: auto !important;
  font-size: 14px !important;
}

html.is-phone #vControlBar:not(.options-open) #vMicSttPickerWrap,
html.is-phone #vControlBar:not(.options-open) #vConvVoicePickerWrap,
html.is-phone #vControlBar:not(.options-open) #vSaveConv,
html.is-phone #vControlBar:not(.options-open) #vToggleSettings,
html.is-phone #vControlBar:not(.options-open) #vAudioInputToggle,
html.is-phone #vControlBar:not(.options-open) #vAutoEngines {
  display: none !important;
}

html.is-phone #vControlBar.options-open {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}

html.is-phone #vControlBar.options-open #vMicSttPickerWrap,
html.is-phone #vControlBar.options-open #vConvVoicePickerWrap,
html.is-phone #vControlBar.options-open .v-top-actions,
html.is-phone #vControlBar.options-open #vAutoEngines {
  display: flex !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Voice Talk button large at bottom */
html.is-phone .v-bottom-dock {
  position: sticky !important;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 800 !important;
  background: var(--surface) !important;
  padding: 8px 12px !important;
}

html.is-phone #vPttBtn,
html.is-phone .ptt-btn {
  width: 96px !important;
  height: 96px !important;
  min-width: 48px !important;
  min-height: 48px !important;
}

/* Single line Not ready notice with fix link */
html.is-phone .voice-status-chip {
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  height: 36px !important;
  line-height: 36px !important;
  padding: 0 10px !important;
}

html.is-phone .voice-ready-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 13px !important;
}

html.is-phone .voice-fix-link {
  flex: 0 0 auto !important;
  margin-inline-start: 6px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  color: var(--accent, #3b82f6) !important;
  white-space: nowrap !important;
  font-size: 13px !important;
}

/* Media Phone layout (ITEM 5) */
html.is-phone .mt-tab {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

html.is-phone .mt-card,
html.is-phone .mt-drop {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.is-phone .mt-drop {
  min-height: 120px !important;
  padding: 24px 16px !important;
}

/* Stacked file picker, model choice, Start button with large tap targets */
html.is-phone .mt-asr-row,
html.is-phone .mt-asr-model-row,
html.is-phone .mt-tr-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

html.is-phone .mt-asr-lang,
html.is-phone .mt-asr-model-select,
html.is-phone .mt-tr-src,
html.is-phone .mt-tr-tgt {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
}

html.is-phone .mt-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

html.is-phone .mt-btn {
  width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Progress and results readable at 360px */
html.is-phone .mt-asr-progress,
html.is-phone .mt-tr-progress,
html.is-phone .mt-progress {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.is-phone .mt-asr-text,
html.is-phone .mt-tr-text,
html.is-phone .mt-pv-list {
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  overflow-x: auto !important;
  font-size: 14px !important;
}

/* Export buttons wrap instead of overflowing */
html.is-phone .mt-pv-export .mt-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

html.is-phone .mt-pv-export .mt-btn {
  flex: 1 1 calc(50% - 6px) !important;
  width: auto !important;
  min-height: 48px !important;
  font-size: 14px !important;
}