/* Phase 7: mobile-first presence shell. Kept separate from the base skin. */
.thought-state{margin:8px 0 4px;color:var(--muted);font-size:12px;letter-spacing:.02em}
.thought-trace{margin:6px 0 2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(20,26,35,.72);color:var(--muted);font-size:11px}
.thought-trace span{display:block;color:var(--cyan);font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}.trace-line{min-height:16px}
.project-story{color:var(--muted);line-height:1.65;font-size:13px}.project-story p{margin:14px 0}.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.story-grid span{padding:10px;border:1px solid var(--line);border-radius:8px;font-size:11px}.story-grid b{display:block;color:var(--text);margin-top:5px;font-weight:500}.model-selector{display:flex;justify-content:space-between;align-items:center;gap:20px}.model-selector h2{margin:0;color:var(--text);font-size:14px}.model-selector p{margin:7px 0 0;color:var(--muted);font-size:12px}.model-select-row{display:flex;gap:8px;min-width:310px}.model-select-row select,.model-select-row button{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px 12px}.model-select-row select{flex:1}.model-select-row button{cursor:pointer;background:var(--cyan);color:#07100f}.model-selector small{color:var(--muted)}.model-chip{display:inline-block;margin:4px 5px 0 0;padding:6px 8px;border:1px solid var(--line);border-radius:7px;color:var(--muted);font-size:11px}
.thought-state::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:phase-pulse 1.2s ease-in-out infinite}
.message.system{max-width:92%;grid-template-columns:30px 1fr;color:var(--muted)}
.message.system>span{border-color:var(--amber);color:var(--amber)}
.message.system>div{padding:12px 14px;border:1px solid color-mix(in srgb,var(--amber) 35%,var(--line));border-radius:4px 14px 14px;background:color-mix(in srgb,var(--amber) 6%,var(--panel))}
.message.system small{display:block;margin-bottom:5px;color:var(--amber);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
#chat-form{align-items:flex-end}
.composer-tools{display:flex;gap:4px;padding:0 0 5px 4px}
#chat-form .tool-button{width:34px;height:34px;flex:0 0 34px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);font-size:17px}
#chat-form .tool-button:hover{color:var(--text);border-color:var(--accent)}
#chat-form .send-button{flex:0 0 auto}
.mobile-nav{display:none}
.toast{position:fixed;left:50%;bottom:24px;z-index:20;max-width:calc(100vw - 32px);padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#151a27;color:var(--text);font-size:12px;opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:.2s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}
.upload-state{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:12px}
.upload-state[hidden]{display:none}
.upload-state>span{width:38px;height:38px;border:3px solid var(--line);border-top-color:var(--cyan);border-radius:50%;animation:upload-spin .9s linear infinite}
.upload-state b,.upload-state small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-state small{margin-top:4px;color:var(--muted)}
.upload-state.done>span{border:0;background:radial-gradient(circle,var(--green) 0 28%,transparent 30%);animation:none}
.upload-state.failed>span{border:0;background:radial-gradient(circle,var(--red) 0 28%,transparent 30%);animation:none}
@keyframes upload-spin{to{transform:rotate(360deg)}}
@keyframes phase-pulse{50%{opacity:.35;transform:scale(.75)}}

@media(max-width:760px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  header nav{display:none}
  .shell{min-height:100vh;min-height:100dvh}
  .chat-stage{padding-bottom:12px}
  .messages{min-height:42dvh}
  #chat-form{position:sticky;bottom:calc(62px + env(safe-area-inset-bottom) + var(--kb,0px));z-index:5;display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:8px;border:1px solid var(--line);border-radius:18px;background:rgba(15,19,29,.96);box-shadow:0 14px 35px rgba(0,0,0,.34);backdrop-filter:blur(18px)}
  #chat-form textarea{min-width:0;padding:10px 2px;border:0;background:transparent}
  .composer-tools{gap:2px;padding:2px 0}
  #chat-form .tool-button{width:30px;height:38px;flex-basis:30px;border:0}
  #chat-form .tool-button:nth-child(n+2){display:none}
  #chat-form .send-button{width:42px;height:42px}
  .hint{display:none}
  .thought-state{position:sticky;bottom:calc(126px + env(safe-area-inset-bottom) + var(--kb,0px));z-index:4;margin:0 8px 6px;padding:7px 10px;border-radius:10px;background:rgba(9,12,20,.84)}
  .upload-state{position:relative;bottom:auto;z-index:1;margin:8px 4px}
  .mobile-nav{position:fixed;right:0;bottom:0;left:0;z-index:10;display:grid;width:100%;box-sizing:border-box;justify-self:stretch;grid-template-columns:repeat(4,1fr);gap:0;padding:7px 10px calc(7px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);border-radius:0;background:rgba(9,12,20,.94);backdrop-filter:blur(20px)}
  .mobile-tab{min-height:48px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:10px;letter-spacing:.02em}
  .mobile-tab span{display:block;margin-bottom:2px;font-size:19px;line-height:20px}
  .mobile-tab.active{color:var(--accent)}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom) + var(--kb,0px))}
}

@media(max-width:760px){.model-selector{display:block}.model-select-row{min-width:0;margin-top:12px}.story-grid{grid-template-columns:1fr}.thought-trace{font-size:10px}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
html{-webkit-text-size-adjust:100%;touch-action:manipulation;overscroll-behavior-x:none}
#chat-form textarea{font-size:16px}
.chat-feed-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 0;padding-bottom:8px;border-bottom:1px solid var(--line);color:var(--text);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.chat-feed-head small{color:var(--muted);font-size:10px;letter-spacing:0;text-transform:none;white-space:nowrap}
.gpu-temperature{margin-left:10px;padding:5px 7px;border:1px solid var(--line);border-radius:7px;color:var(--muted);font-size:10px;white-space:nowrap}.gpu-temperature.hot{color:var(--red);border-color:var(--red)}
.messages{min-height:0;padding:20px 0 170px;gap:16px;overflow-wrap:anywhere}.message{max-width:88%;word-break:break-word}.message>div{white-space:pre-wrap}.thought-trace{max-width:100%;overflow-wrap:anywhere}
@media(max-width:760px){
  main{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .chat-stage{min-height:100vh;min-height:100dvh;padding:18px 12px calc(190px + env(safe-area-inset-bottom))}
  .presence{gap:14px;padding-bottom:16px}.presence h1{font-size:25px}.presence p{font-size:13px;line-height:1.4}
  .orb{width:48px;height:48px;flex:none}.chat-feed-head{margin-top:12px;font-size:10px}.chat-feed-head small{font-size:9px}
  .messages{padding:12px 0 190px;gap:12px}.message{max-width:94%;font-size:15px;line-height:1.5}.message.human>div{padding:12px 14px}
  #chat-form{position:fixed;left:50%;bottom:calc(70px + env(safe-area-inset-bottom) + var(--kb,0px));transform:translateX(-50%);width:calc(100% - 20px);margin:0;z-index:20}
  .thought-state{position:fixed;left:50%;bottom:calc(132px + env(safe-area-inset-bottom) + var(--kb,0px));transform:translateX(-50%);width:calc(100% - 20px);z-index:19;pointer-events:none}
  .upload-state{margin-bottom:10px}.toast{bottom:calc(78px + env(safe-area-inset-bottom) + var(--kb,0px))}
}
@media(prefers-reduced-motion:reduce){.thought-state::before{animation:none}}