/* VEYTU V5.7 — acabamento visual responsivo, sem alterar lógica WebRTC/TURN.
   Marca + ferramentas numa linha; superfícies pequenas com alvos acessíveis. */
:root {--v57-surface-soft:rgba(49,112,95,.035)}
/* Preservar a disposição desktop e a identidade existente. */
.topbar .language-chip{display:contents}
.topbar .language-code,.topbar .language-chevron{display:none}
@media (max-width:700px){
  .topbar{
    display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;
    column-gap:3px!important;row-gap:0!important;align-items:center!important;
    padding:calc(7px + env(safe-area-inset-top,0px)) max(9px,env(safe-area-inset-right,0px)) 7px max(9px,env(safe-area-inset-left,0px))!important;
    min-height:58px!important;
  }
  .topbar .brand{grid-column:1!important;grid-row:1!important;min-width:0;max-width:100%;align-self:center}
  .topbar .brand-main{gap:4px;white-space:nowrap}
  .topbar .brand-name{font-size:clamp(17px,5vw,21px)!important;letter-spacing:-.055em}
  .topbar .veytu-symbol{width:21px!important;height:21px!important;flex-shrink:0}
  .topbar .brand-tagline{font-size:7.5px!important;letter-spacing:.02em!important;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .topbar .top-actions{
    grid-column:2!important;grid-row:1!important;display:grid!important;
    grid-template-columns:66px 40px 44px 44px!important;align-items:center!important;
    gap:2px!important;width:max-content!important;max-width:none!important;min-width:0!important;
    justify-content:end!important;margin:0!important;
  }
  /* Native SELECT retains focus, language options, and click/touch behavior. */
  .topbar .top-actions .language-chip{
    grid-column:1;grid-row:1;position:relative;display:flex;align-items:center;
    justify-content:center;gap:3px;width:66px;height:42px;
    border:1px solid var(--line);border-radius:12px;
    background:var(--paper);color:var(--ink);font-size:11px;font-weight:650;
  }
  .topbar .top-actions .language-code{display:inline;white-space:nowrap;pointer-events:none}
  .topbar .top-actions .language-chevron{display:inline;font-size:11px;opacity:.7;pointer-events:none}
  .topbar .top-actions .language-chip #interfaceLanguage{
    position:absolute!important;inset:0!important;z-index:2;
    display:block!important;width:100%!important;max-width:none!important;
    height:100%!important;min-height:100%!important;margin:0!important;
    padding:0!important;opacity:0!important;cursor:pointer;
    -webkit-appearance:menulist;appearance:menulist;
  }
  .topbar .top-actions .language-chip:focus-within{outline:2px solid var(--jade);outline-offset:2px}
  .topbar .top-actions #learnBtn,
  .topbar .top-actions #themeButton,
  .topbar .top-actions #settingsButton{
    grid-row:1!important;grid-column:auto!important;justify-self:center!important;
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
    padding:0!important;margin:0!important;
  }
  .topbar .top-actions #learnBtn{
    grid-column:2!important;min-width:40px!important;width:40px!important;
    font-size:10px!important;font-weight:600;letter-spacing:-.025em;
    border:0;background:transparent;border-radius:12px;
  }
  .topbar .top-actions #themeButton{grid-column:3!important}
  .topbar .top-actions #settingsButton{grid-column:4!important}
  /* Visual border is inset while the real hit area remains 44 px. */
  .topbar .top-actions .icon-button{position:relative;border:0!important;background:transparent!important;box-shadow:none!important}
  .topbar .top-actions .icon-button::before{
    content:"";position:absolute;inset:5px;z-index:0;
    border:1px solid var(--line);border-radius:50%;background:var(--paper)
  }
  .topbar .top-actions .icon-button svg{position:relative;z-index:1;width:17px!important;height:17px!important;stroke-width:1.6px}
  .topbar .top-actions .icon-button:focus-visible,.topbar .top-actions #learnBtn:focus-visible{outline:2px solid var(--jade);outline-offset:0}
  .topbar .top-actions .network-pill{display:none!important}
  /* Compact invitation / final screens, while keeping form controls comfortable. */
  .express-view{padding-top:5px!important}
  .express-view .express-emblem{margin-top:5px!important;margin-bottom:12px!important}
  .express-view .invite-meta{margin-block:8px!important}
  .final-view:not([hidden]){padding-top:clamp(10px,2vh,20px)!important}
  /* Settings: same controls, calmer hierarchy; safe full-height sheet. */
  dialog.integral-settings{
    width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;
    padding:calc(12px + env(safe-area-inset-top,0px)) 17px calc(22px + env(safe-area-inset-bottom,0px))!important;
    border:0!important;border-radius:0!important;overscroll-behavior:contain;
  }
  .integral-settings .modal-top{
    position:sticky;top:calc(-12px - env(safe-area-inset-top,0px));z-index:10;
    background:var(--bg);padding:10px 0 13px;margin:0 0 5px;
    border-bottom:1px solid var(--line);align-items:center!important;
  }
  .integral-settings .modal-top .mini-kicker{font-size:9px;letter-spacing:.13em}
  .integral-settings .modal-top h2{font-size:20px!important;margin:3px 0 0!important}
  .integral-settings .modal-top p{font-size:11px!important;max-width:29em;margin-top:3px!important}
  .integral-settings .modal-top .close-button{top:auto!important;align-self:center;min-width:44px;width:44px;height:44px}
  .integral-settings #prefSections{border-top:0!important;display:grid;gap:8px;padding-top:9px}
  .integral-settings .integral-pref-section{
    margin:0!important;padding:0 13px!important;border:1px solid var(--line)!important;
    border-radius:14px;overflow:visible;background:var(--v57-surface-soft);
  }
  .integral-settings .integral-pref-section>summary{
    min-height:51px!important;padding:14px 4px!important;font-size:13px!important;
    font-weight:680;letter-spacing:.005em;list-style:none;
  }
  .integral-settings .integral-pref-section>summary::-webkit-details-marker{display:none}
  .integral-settings .integral-pref-section>summary:after{
    content:'+';float:right;font-size:18px;font-weight:400;color:var(--muted)
  }
  .integral-settings .integral-pref-section[open]>summary:after{content:'−'}
  .integral-settings .integral-pref-section>.pref-group{padding:1px 1px 14px!important}
  .integral-settings .pref-group label,.integral-settings .pref-group .field-label{font-size:12px!important}
  .integral-settings .toggle-row{min-height:44px!important;padding:8px 0;margin:4px 0!important;gap:11px!important}
  .integral-settings .toggle-row small{font-size:10px;line-height:1.35}
  .integral-settings .pref-group select,
  .integral-settings .pref-group input[type=number]{min-height:45px;font-size:14px!important}
  .integral-settings .pref-group .secondary-btn{min-height:43px;font-size:12px}
  .integral-settings #prefsDoneBtn{min-height:48px;margin-top:15px!important}
}
@media(max-width:365px){
  .topbar{padding-left:7px!important;padding-right:7px!important}
  .topbar .brand-name{font-size:17px!important}
  .topbar .brand-tagline{display:none!important}
  .topbar .top-actions{grid-template-columns:61px 38px 44px 44px!important;gap:1px!important}
  .topbar .top-actions .language-chip{width:61px}
  .topbar .top-actions #learnBtn{width:38px!important;min-width:38px!important;font-size:10px!important}
}
/* iPad and Android tablets: a lighter sheet with a fixed, sensible width. */
@media(min-width:701px) and (max-width:1100px){
  .topbar{padding-inline:18px;gap:10px}
  .topbar .top-actions{gap:7px}
  .room-view.integral-room{max-width:min(900px,94vw)}
  .integral-room .orbit-panel{max-width:760px}
  dialog.integral-settings{width:min(470px,58vw);padding:20px;border-radius:20px 0 0 20px}
  .integral-settings .integral-pref-section>summary{font-size:14px}
}
/* Text accessibility and reduced motion inherited from original UI. */
@media(prefers-reduced-motion:reduce){.topbar *{transition:none!important}}