/* MOBILE_GROK_SHELL_20260921 — only <768 / body.is-mobile */
@media (max-width: 768px) {
  body.is-mobile {
    --grok-bg: #050505;
    --grok-input: #1a1a1a;
    --grok-border: #2a2a2a;
    --grok-text: #f4f4f5;
    --grok-muted: #8e8e93;
    --grok-capsule: #2a2a2a;
    --grok-capsule-on: #f4f4f5;
    --grok-capsule-on-fg: #111;
    --bg: var(--grok-bg) !important;
    --bg2: #0a0a0a !important;
    --panel: #121212 !important;
    --panel2: #1a1a1a !important;
    --border: var(--grok-border) !important;
    --border2: #333 !important;
    --text: var(--grok-text) !important;
    --muted: var(--grok-muted) !important;
    --muted2: #6b6b70 !important;
    background: var(--grok-bg) !important;
    color: var(--grok-text) !important;
  }
  body.is-mobile .main,
  body.is-mobile .chat-layout,
  body.is-mobile .chat-area,
  body.is-mobile .m-body-row,
  body.is-mobile .m-right-pane,
  body.is-mobile .chat-scroll,
  body.is-mobile #chat-scroll {
    background: var(--grok-bg) !important;
    color: var(--grok-text) !important;
  }
  body.is-mobile .desk-head,
  body.is-mobile .chat-head.desk-head {
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 8px 12px !important;
    background: var(--grok-bg) !important;
    border-bottom: none !important;
  }
  body.is-mobile .m-status { display: none !important; }
  body.is-mobile .desk-head .proj-title-btn,
  body.is-mobile .desk-head #proj-title {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    background: transparent !important;
    border: none !important;
  }
  body.is-mobile .grok-model-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    color: var(--grok-muted);
    border: 1px solid var(--grok-border);
    vertical-align: middle;
  }
  body.is-mobile #proj-toggle,
  body.is-mobile .proj-toggle,
  body.is-mobile #grok-newchat {
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 1px solid var(--grok-border);
    background: var(--grok-input);
    color: var(--grok-text);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.is-mobile .desk-head > div:last-child .btn,
  body.is-mobile .desk-head .head-user,
  body.is-mobile .desk-head .head-credits,
  body.is-mobile .desk-head #skills-pref-btn,
  body.is-mobile .desk-head #prefs-btn,
  body.is-mobile .desk-head #idx-btn,
  body.is-mobile .desk-head [data-navgo] {
    display: none !important;
  }
  body.is-mobile #chat-scroll,
  body.is-mobile .chat-scroll { padding: 12px 14px 24px !important; }
  body.is-mobile .msg.user { justify-content: flex-end !important; }
  body.is-mobile .msg.user .m-bubble,
  body.is-mobile .msg.user .m-body {
    background: #2a2a2a !important;
    color: var(--grok-text) !important;
    border-radius: 18px 18px 6px 18px !important;
    padding: 10px 14px !important;
    max-width: 85%;
    margin-left: auto;
  }
  body.is-mobile .msg.ai .m-ava { display: none !important; }
  body.is-mobile .msg.ai .m-body,
  body.is-mobile .msg.ai .md {
    background: transparent !important;
    color: var(--grok-text) !important;
    padding: 4px 2px !important;
    max-width: 100%;
  }
  body.is-mobile .empty-chat,
  body.is-mobile .jimeng-empty {
    min-height: 48vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 16px 8px;
  }
  body.is-mobile .empty-greeting { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
  body.is-mobile .empty-sub { color: var(--grok-muted); margin-top: 8px; font-size: 13px; }
  body.is-mobile #grok-home-chips {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    padding: 8px 12px 12px;
  }
  body.is-mobile #grok-home-chips.hidden { display: none !important; }
  body.is-mobile .grok-chip {
    border: 1px solid var(--grok-border);
    background: #121212;
    color: var(--grok-text);
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.3;
  }
  body.is-mobile #grok-imagine {
    display: none; flex: 1; overflow: auto; padding: 12px;
    grid-template-columns: 1fr 1fr; gap: 10px;
  }
  body.is-mobile.grok-imagine-on #grok-imagine { display: grid; }
  body.is-mobile.grok-imagine-on #chat-scroll,
  body.is-mobile.grok-imagine-on .chat-scroll,
  body.is-mobile.grok-imagine-on #grok-home-chips { display: none !important; }
  body.is-mobile .grok-tile {
    aspect-ratio: 1; border-radius: 16px; overflow: hidden;
    background: #121212; border: 1px solid var(--grok-border);
  }
  body.is-mobile .grok-tile img, body.is-mobile .grok-tile video {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  body.is-mobile .grok-tile-empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--grok-muted); font-size: 12px; padding: 12px; text-align: center;
  }
  body.is-mobile #chat-inputbar, body.is-mobile .chat-inputbar {
    background: transparent !important;
    border-top: none !important;
    padding: 6px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.is-mobile #grok-tools {
    display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px;
    -webkit-overflow-scrolling: touch;
  }
  body.is-mobile .grok-tool {
    flex: 0 0 auto; border-radius: 999px; border: 1px solid var(--grok-border);
    background: var(--grok-capsule); color: var(--grok-text);
    padding: 8px 12px; font-size: 12px; white-space: nowrap;
  }
  body.is-mobile .grok-tool.on {
    background: var(--grok-capsule-on); color: var(--grok-capsule-on-fg);
    border-color: var(--grok-capsule-on); font-weight: 600;
  }
  body.is-mobile .composer-shell, body.is-mobile #composer-shell {
    background: var(--grok-input) !important;
    border: 1px solid var(--grok-border) !important;
    border-radius: 24px !important;
    padding: 8px 10px 6px !important;
  }
  body.is-mobile #chat-input {
    background: transparent !important; color: var(--grok-text) !important;
    min-height: 24px !important; max-height: 120px !important; font-size: 16px !important;
  }
  body.is-mobile .composer-mode-wrap,
  body.is-mobile #auto-prefs-btn,
  body.is-mobile #skills-panel-btn,
  body.is-mobile #at-picker-btn,
  body.is-mobile .skill-chips,
  body.is-mobile #skill-chips,
  body.is-mobile .m-input-meta,
  body.is-mobile #mode-mini,
  body.is-mobile #params-row { display: none !important; }
  body.is-mobile #add-asset,
  body.is-mobile .composer-plus,
  body.is-mobile #grok-mic,
  body.is-mobile #grok-voice,
  body.is-mobile #chat-send {
    width: 36px; height: 36px; border-radius: 999px; border: none;
    background: #2f2f2f; color: var(--grok-text);
    display: inline-flex; align-items: center; justify-content: center;
  }
  body.is-mobile #chat-send { background: #f4f4f5; color: #111; }
  body.is-mobile #grok-lang-row {
    display: flex; gap: 8px; padding: 10px 12px 14px;
    border-top: 1px solid var(--grok-border);
  }
  body.is-mobile #grok-lang-row button {
    flex: 1; border-radius: 999px; border: 1px solid var(--grok-border);
    background: #161616; color: var(--grok-text); padding: 10px; font-size: 13px;
  }
  body.is-mobile #grok-lang-row button.on {
    background: #f4f4f5; color: #111; font-weight: 650;
  }
  body.is-mobile #grok-attach-mask,
  body.is-mobile #grok-voice-mask {
    position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.55);
  }
  body.is-mobile #grok-attach-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 4001;
    background: #141414; border-radius: 20px 20px 0 0;
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--grok-border);
  }
  body.is-mobile .grok-sheet-item {
    width: 100%; text-align: left; padding: 14px 12px; border: none;
    background: transparent; color: var(--grok-text); font-size: 15px;
    border-bottom: 1px solid #222;
  }
  body.is-mobile .grok-sheet-item:last-child { border-bottom: none; }
  body.is-mobile #grok-voice-page {
    position: fixed; inset: 0; z-index: 4100; background: #050505;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 28px; padding: 24px;
  }
  body.is-mobile .grok-orb {
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #6b6bff, #1a1a2e 55%, #050505 75%);
    box-shadow: 0 0 60px rgba(100,100,255,.35);
    animation: grokBreath 2.4s ease-in-out infinite;
  }
  @keyframes grokBreath {
    0%,100% { transform: scale(1); opacity: .9; }
    50% { transform: scale(1.06); opacity: 1; }
  }
  body.is-mobile .grok-voice-hint { color: var(--grok-muted); font-size: 14px; }
  body.is-mobile .grok-voice-ops { display: flex; gap: 18px; }
  body.is-mobile .grok-voice-ops button {
    width: 56px; height: 56px; border-radius: 999px;
    border: 1px solid var(--grok-border); background: #1a1a1a; color: #fff; font-size: 18px;
  }
  body.is-mobile.grok-shell-on .sidebar { background: #0b0b0b !important; }
}

@media (max-width: 768px) {
  body.is-mobile #grok-attach-mask[hidden],
  body.is-mobile #grok-attach-sheet[hidden],
  body.is-mobile #grok-voice-page[hidden] { display: none !important; }
  body.is-mobile #grok-attach-mask:not([hidden]) { display: block !important; }
  body.is-mobile #grok-attach-sheet:not([hidden]) { display: block !important; }
  body.is-mobile #grok-voice-page:not([hidden]) { display: flex !important; }
  body.is-mobile .grok-top-right { display: flex; gap: 8px; align-items: center; margin-left: auto; }
  body.is-mobile #chat-inputbar .skill-chips { display: none !important; }
}