/* Volt v2 mobile (≤600px): barra de abas, entrada, chat, Office em carrossel, tarefas e agenda.
   O desktop não muda: tudo neste arquivo fica atrás de max-width:600px, salvo o que começa oculto. */

.m-tabs,.m-more,.m-office,.m-agenda{display:none}  /* .m-plus ("+") shows on the desktop too (#77) */

@media (max-width:600px){
  html,body{height:100%;}
  .m-tabs{
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    height:calc(56px + env(safe-area-inset-bottom,0px));
    padding:4px 6px calc(8px + env(safe-area-inset-bottom,0px));
    background:var(--surface);border-top:1px solid var(--line);
  }
  .m-tab{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;min-height:44px;min-width:44px;padding:4px 2px;border-radius:10px;
    color:var(--faint);text-decoration:none;font-size:10.5px;font-weight:600;
  }
  .m-tab.on,.m-tab[aria-current=page]{color:var(--text)}
  .m-tab-ic{font-size:18px;line-height:22px}
  .m-tab-n{
    position:absolute;top:2px;right:10px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
    background:#5b5ff0;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
  }
  .m-tab-n:empty,.m-tab-n[hidden]{display:none}

  /* —— Entrada —— */
  .v2-login,.v2-login .login-shell{height:100vh;height:100dvh}
  .v2-login .login-card,.v2-login .login-raio,.v2-login .login-raio-art{animation:none}
  .v2-login .login-top{padding:10px 14px}
  .v2-login .login-brand{display:none}
  .v2-login .login-raio strong,.v2-login .login-raio span{display:none}
  .v2-login .login-note{display:none}
  .v2-login .login-main{padding:16px 22px 24px;align-items:center}
  .v2-login .login-card{width:100%;max-width:360px;padding:26px 22px 22px;border-radius:24px;gap:14px}
  .v2-login .login-logo{width:60px;height:60px}
  .v2-login .login-mark strong{font-size:30px}
  .v2-login .login-fields input{height:48px;min-height:44px;padding:0 14px;font-size:15px;border-radius:12px}
  .v2-login .login-submit{height:50px;min-height:44px;font-size:16px}
  .v2-login .theme-switch button{min-height:44px;min-width:44px;padding:8px 10px}

  /* —— O chat é um app (#57): a página não rola nem "pula" (efeito elástico do iOS); só o feed e as listas rolam,
     e as barras de cima e de baixo ficam paradas. Com o teclado aberto, o chat-app segue a área visível (chat.js). */
  html:has(body > .chat-app){overscroll-behavior:none}
  body:has(> .chat-app){position:fixed;inset:0;width:100%;overflow:hidden;overscroll-behavior:none}
  .chat-app .feed-wrap,.chat-app .task-list,.chat-app .board-wrap,.chat-app .m-gantt,.chat-app .sidebar-scroll{
    overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
  body.kb-open .m-tabs{display:none}
  body.kb-open .chat-app{padding-bottom:0}

  /* —— Chat shell —— */
  .chat-app{height:100vh;height:100dvh;min-height:0;padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .chat-app .topbar{display:none}
  .chat-app .sidebar{top:0;bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .m-hash{
    width:32px;height:32px;flex:none;border-radius:9px;background:var(--field);
    display:flex;align-items:center;justify-content:center;font:600 14px var(--mono);color:var(--accent-text);
  }
  .m-more{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:none;border:0;border-radius:50%;
    background:var(--field);color:var(--text2);font-size:18px;cursor:pointer;
  }
  .room-head{
    min-height:56px;padding:8px 12px 10px;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);
  }
  .chat-app:not([data-room="office"]) .m-hash{display:none}
  .room-head .raio-av,.room-head .head-spacer,.room-head .rtabs,.room-head .raio-toggle,
  .room-head .room-people,.room-head .replay{display:none!important}
  .room-title{flex:1;min-width:0}
  .room-title strong{font-size:16px}
  .room-title span{font-size:11.5px}
  #office-head-extra{
    flex-basis:100%!important;padding:0;border:0;overflow:visible;
  }
  #filters.seg{
    display:flex;gap:6px;padding:10px 0 0;overflow-x:auto;border:0;background:transparent;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  #filters.seg::-webkit-scrollbar{display:none}
  #filters.seg button{
    flex:none;min-height:44px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;
    background:var(--field);color:var(--text2);
  }
  #filters.seg button.active{background:var(--text);color:var(--bg)}
  #filters.seg button .n{color:inherit;opacity:.6;font-weight:600}
  .feed-wrap{padding:4px 14px 10px}
  .hint-row{display:none}
  .composer{padding:8px 12px;border-top:1px solid var(--line)}
  .composer-inner{max-width:none}
  .m-plus{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:none;border:0;border-radius:50%;
    background:var(--field);color:var(--text);cursor:pointer;
  }
  .box{
    background:transparent;border:0;padding:0;gap:8px;align-items:center;box-shadow:none;
  }
  .box:focus-within{border:0;box-shadow:none}
  .box .m-plus{order:0}
  #message{
    order:1;flex:1;min-width:0;height:44px;min-height:44px;max-height:140px;
    padding:10px 8px 10px 16px;border:1px solid var(--line2);border-right:0;
    border-radius:22px 0 0 22px;background:var(--bg);font-size:15px;
  }
  #mic-button{
    order:2;width:44px;height:44px;min-width:44px;border-radius:0 22px 22px 0;
    background:var(--bg);border:1px solid var(--line2);border-left:0;color:var(--text2);
  }
  /* Gravando (#57): o botão é a metade direita da pílula do campo, e o #mic-button acima vence o .icon-btn.rec do
     desktop. Aqui ele fica vermelho, com um pulso por dentro que cabe no formato, e a linha "Ouvindo…" aparece. */
  #mic-button.rec{background:#ef4444;border-color:#ef4444;color:#fff;animation:vrecm 1.2s ease-in-out infinite}
  .composer:has(#composer-hint.rec) .hint-row{display:flex;padding:6px 4px 0}
  #composer-hint.rec{font-size:12px;font-weight:600}
  .send-btn{display:none;order:3;width:44px;height:44px;min-width:44px}
  .send-btn.ready{display:flex}
  .slash button,.mentions button{min-height:44px}

  /* Tarefas em tela cheia */
  .chat-app[data-mtab=tarefas] .room-head,
  .chat-app[data-mtab=tarefas] .feed-wrap,
  .chat-app[data-mtab=tarefas] .composer,
  .chat-app[data-mtab=tarefas] .raio,
  .chat-app[data-mtab=tarefas] .board-wrap{display:none!important}
  .chat-app[data-mtab=tarefas] .tasks{
    display:flex!important;position:absolute;inset:0 0 calc(56px + env(safe-area-inset-bottom,0px)) 0;
    width:auto;border:0;background:var(--bg);z-index:5;
  }
  .tasks-head{padding:8px 16px 4px;gap:12px}
  .tasks-head .row strong{font-size:26px;font-weight:700;letter-spacing:-.02em}
  .tasks-head .row .sub{display:none}
  .tasks .cols{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px;
    background:var(--field);border-radius:12px;
  }
  .tasks .cols button{
    height:44px;min-height:44px;border:0;border-radius:9px;font-size:12px;font-weight:600;
    background:transparent;color:var(--muted);flex-direction:row;gap:4px;
  }
  .tasks .cols button.active{background:var(--text);color:var(--bg)}
  .tasks .cols .n{min-width:0;height:auto;padding:0;background:transparent;color:inherit}
  .tasks .cols [data-col=discarded] .l{font-size:0}
  .tasks .cols [data-col=discarded] .l::after{content:"Desc.";font-size:12px}
  .task-list{padding:10px 14px;gap:8px}
  .task-card{
    min-height:44px;padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line);
    align-items:flex-start;
  }
  .tasks-foot{display:none}

  /* Agenda em tela cheia */
  .chat-app[data-mtab=agenda] .room-head,
  .chat-app[data-mtab=agenda] .feed-wrap,
  .chat-app[data-mtab=agenda] .composer,
  .chat-app[data-mtab=agenda] .raio,
  .chat-app[data-mtab=agenda] .tasks,
  .chat-app[data-mtab=agenda] .board-wrap{display:none!important}
  .m-agenda{
    display:none;flex-direction:column;flex:1;min-height:0;background:var(--bg);
  }
  .chat-app[data-mtab=agenda] .m-agenda{display:flex}
  .m-agenda-head{flex:none;padding:8px 16px 8px;display:flex;flex-direction:column;gap:12px}
  .m-agenda-head>strong{font-size:26px;font-weight:700;letter-spacing:-.02em}
  .m-week{display:flex;gap:6px}
  .m-day{
    flex:1;min-width:0;height:56px;min-height:44px;border:0;border-radius:14px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    background:var(--field);color:var(--text2);cursor:pointer;font:inherit;
  }
  .m-day .d{font-size:10.5px;font-weight:600;opacity:.75}
  .m-day strong{font-size:17px;font-weight:700}
  .m-day.on{background:var(--text);color:var(--bg)}
  .m-agenda-sub{font-size:12.5px;color:var(--muted)}
  .m-gantt{flex:1;min-height:0;overflow:auto;padding:0 14px 10px;display:flex;flex-direction:column;gap:6px}
  .m-grow{
    display:flex;flex-direction:column;gap:5px;padding:9px 11px;border-radius:12px;background:var(--card);
    min-height:44px;width:100%;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
  }
  .m-grow .row{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;min-width:0}
  .m-grow .av{width:18px;height:18px;flex:none}
  .m-grow .av svg,.m-grow .av .avatar{width:18px;height:18px}
  .m-grow .id{font-family:var(--mono);color:var(--accent-text);flex:none}
  .m-grow .ttl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-grow .span{flex:none;font:400 10.5px var(--mono);color:var(--muted)}
  .m-grow .bar{position:relative;height:8px;border-radius:4px;background:var(--field)}
  .m-grow .bar>i{position:absolute;top:0;bottom:0;min-width:5px;border-radius:4px;display:block}
  .m-gantt .empty{padding:28px 8px;text-align:center;font-size:13px;color:var(--muted)}
  .m-sched{
    flex:none;margin:8px 14px 10px;height:46px;min-height:44px;border:0;border-radius:23px;
    background:var(--text);color:var(--bg);font-size:15px;font-weight:600;cursor:pointer;
  }

  /* Modal da tarefa: só o layout no celular; o seletor de #71 permanece */
  .backdrop .modal,.modal{width:calc(100vw - 24px);max-width:none}
  .actions button{min-height:44px}

  /* —— Office carrossel —— */
  body.office-v2{overflow:hidden;height:100vh;height:100dvh}
  body.office-v2 .topbar,
  body.office-v2 .office-classic,
  body.office-v2 .office-map,
  body.office-v2 .v2-sala,
  body.office-v2 .office-views,
  body.office-v2 .office-map-fallback,
  #tab-mapa,#tab-lista,#tab-quadro,#kanban,#grid{display:none!important}
  body.office-v2 .office{height:100%;padding:0;max-width:none}
  .m-office{
    display:flex;flex-direction:column;height:100%;
    padding:6px 0 calc(56px + env(safe-area-inset-bottom,0px));
    background:var(--bg);color:var(--text);
  }
  .m-off-head{
    flex:none;padding:6px 16px;display:flex;align-items:center;gap:10px;
  }
  .m-office .live{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ok);flex:none}
  .m-office .live i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block}
  .m-off-head>div{flex:1;display:flex;flex-direction:column}
  .m-off-head strong{font-size:22px;font-weight:700;letter-spacing:-.02em}
  .m-off-head span{font-size:12px;color:var(--muted)}
  .m-off-filters{
    flex:none;display:flex;gap:6px;padding:4px 14px 2px;overflow-x:auto;scrollbar-width:none;
  }
  .m-off-filters::-webkit-scrollbar{display:none}
  .m-off-filters button{
    flex:none;display:flex;align-items:center;gap:6px;min-height:44px;padding:6px 11px;
    border:0;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;
    background:var(--field);color:var(--text2);
  }
  .m-off-filters button.on{background:var(--text);color:var(--bg)}
  .m-off-filters i{width:7px;height:7px;border-radius:50%;display:block}
  .m-off-filters button .n{opacity:.6}
  .m-ring{
    position:relative;flex:none;height:292px;overflow:hidden;touch-action:none;cursor:grab;user-select:none;
  }
  .m-ring.drag{cursor:grabbing}
  .m-ring-glow{
    position:absolute;left:24px;right:24px;top:150px;height:120px;border-radius:50%;
    background:radial-gradient(ellipse at center,var(--hover) 0%,var(--field) 55%,transparent 72%);
    pointer-events:none;
  }
  .m-ring-orbit{
    position:absolute;left:58px;right:58px;top:172px;height:76px;border-radius:50%;
    border:1px dashed var(--line2);pointer-events:none;
  }
  .m-ring-items{position:absolute;inset:0;pointer-events:none}
  .m-ring-item{
    position:absolute;left:50%;top:0;width:96px;margin-left:-48px;
    display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
    background:transparent;border:0;color:var(--text);padding:0;font:inherit;pointer-events:auto;
  }
  .m-ring-av{
    position:relative;width:84px;height:84px;border-radius:50%;border:3px solid var(--ok);
    background:var(--bg);display:flex;align-items:center;justify-content:center;
  }
  .m-ring-av .art{
    display:block;width:70px;height:70px;object-fit:contain;pointer-events:none;
  }
  .m-ring-av .ic{
    position:absolute;right:-2px;bottom:2px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;
    border:2px solid var(--bg);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
    color:#0f0f10;
  }
  .m-ring-item>span:last-child{font-size:13px;font-weight:600;white-space:nowrap}
  .m-ring-nav{
    position:absolute;top:110px;z-index:8;width:44px;height:44px;min-width:44px;
    border:1px solid var(--line2);border-radius:50%;background:var(--glass-solid);color:var(--text);
    font-size:18px;cursor:pointer;
  }
  .m-ring-nav.prev{left:8px}
  .m-ring-nav.next{right:8px}
  .m-off-card{
    flex:1;min-height:0;margin:0 10px;padding:14px;border-radius:22px 22px 0 0;
    background:var(--card);border:1px solid var(--line);border-bottom:0;
    display:flex;flex-direction:column;gap:11px;overflow:auto;
  }
  .m-off-who{display:flex;gap:10px;align-items:center}
  .m-off-who>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .m-off-who strong{font-size:17px;font-weight:700}
  .m-off-pill{
    padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;color:#0f0f10;
  }
  .m-off-role{font-size:12px;color:var(--muted)}
  .m-off-pct{flex:none;font:600 13px var(--mono);color:var(--text2)}
  .m-off-task{font-size:13.5px;line-height:1.4;color:var(--text2);text-wrap:pretty}
  .m-off-bar{height:5px;border-radius:3px;background:var(--field);overflow:hidden}
  .m-off-bar>i{display:block;height:100%;border-radius:3px}
  .m-dests{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .m-dests button{
    min-height:52px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);
    font-size:10.5px;font-weight:600;cursor:pointer;
  }
  .m-dests button.on{border-color:currentColor}
  @keyframes mbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  @keyframes mblink{0%,100%{opacity:1}50%{opacity:.25}}
  .m-office .live i{animation:mblink 2s infinite}
  .m-ring-item.work .art{animation:mbob 1.6s ease-in-out infinite}

  /* —— Ajustes —— */
  .set-app{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .set-app .topbar{display:none}
  .set-main{padding-bottom:24px}
}

@media (max-width:600px) and (prefers-reduced-motion:reduce){
  .m-ring-item.work .art,.m-office .live i{animation:none}
}

@keyframes vrecm{0%,100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,.45)}50%{box-shadow:inset 0 0 0 8px rgba(255,255,255,0)}}