#piperPreviewPortrait{display:block;width:72px;height:72px;object-fit:cover;border-radius:50%;margin:0 0 10px;border:1px solid #d7aa49}
/* Normal Hive reflows on a phone. No scaled canvas or alternate workspace. */
#hiveResponsiveDock[hidden], #hiveAppInstallHelp[hidden] { display:none!important; }
#hiveAppInstallHelp { margin:12px 24px; padding:16px; border:1px solid #9b7a17; background:#101113; color:#eee0b9; }
#hiveAppInstallHelp p { line-height:1.5; overflow-wrap:anywhere; }
#hiveAppInstallHelp button { min-height:44px; }
.topbar #installHiveApp { white-space:normal; text-align:center; }
@media (max-width:850px) {
  .shell { display:grid; grid-template-columns:minmax(0,1fr); }
  .shell > main, .view { min-width:0; width:100%; max-width:100%; }
  .view { padding:20px 12px 32px; overflow:visible; }
  main { padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  .topbar { overflow:visible; }
  .topbar #installHiveApp { grid-area:download; min-width:0; min-height:44px; }
  .topbar #refresh { min-height:44px; }
  #hiveAppInstallHelp { margin:10px 12px; }
  #onboardingPanel .onboarding-types { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
  #onboardingPanel .onboarding-type-stack { display:contents; }
  #onboardingPanel .onboarding-types > button { min-height:56px; }
  #onboardingPanel .onboarding-type-stack button,
  #onboardingPanel .onboarding-type-stack:has(>button:only-child) button { grid-row:auto; grid-column:auto; height:auto; min-height:44px; padding:8px 9px; font-size:15px; line-height:1.3; }
  #onboardingPanel .onboarding-type-stack button small { display:block; margin-top:4px; font-size:11px; font-weight:normal; }
  .workspace-context-switch, .onboarding-actions, .panel-head, .item-actions { min-width:0; flex-wrap:wrap; }
  .workspace-context-switch > *, .panel-head > *, .item-actions > * { min-width:0; max-width:100%; }
  .workspace-context :is(input,select), .view :is(input,textarea,select) { min-width:0; max-width:100%; font-size:16px; }
  .view :is(button,.ghost,.primary), #hiveResponsiveDock :is(button,.nav) { min-height:44px; white-space:normal; overflow-wrap:anywhere; line-height:1.4; }
  .view summary, #hiveResponsiveDock summary { min-height:44px!important; padding-block:10px; }
  .view :is(.command-grid,.tool-grid,.project-grid) { grid-template-columns:minmax(0,1fr); }
  .view :is(img,video,canvas) { max-width:100%; }
  #hiveResponsiveDock { min-width:0; margin:0 12px 24px; }
  #hiveResponsiveDock > .sidebar { position:static; inset:auto; height:auto; width:100%; padding:12px; border:1px solid #6b5830; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; overflow:visible; }
  #hiveResponsiveDock .sidebar > .nav-label { display:block; grid-column:1/-1; margin:0; }
  #hiveResponsiveDock .sidebar > .nav { width:100%; font-size:14px; }
  #hivePhonePiperAvatar { grid-column:1/-1; min-width:0; }
  #hivePhonePiperAvatar > summary { cursor:pointer; color:#f4d079; }
  #hiveResponsiveDock #hivePhonePiperAvatar:not([open]) > #piperSideDock { display:none!important; }
  #hiveResponsiveDock #piperSideDock { display:block!important; position:static; inset:auto; grid-column:1/-1; width:100%; max-height:none; margin:0 0 10px; padding:12px; overflow:visible; }
  #hiveResponsiveDock #piperSideDock .piper-dock-head { flex-wrap:wrap; }
  #hiveResponsiveDock #piperSideDock .piper-dock-head button { min-height:44px; font-size:14px; padding:9px 12px; }
  #hiveResponsiveDock #piperSideDock .piper-live-stage { min-height:190px; height:190px; }
  #hiveResponsiveDock #piperSideDock #piperLiveRoom > :is(.piper-live-controls,.piper-more-controls,.piper-live-note):not(.hidden):not([hidden]) { display:block!important; }
  #hiveResponsiveDock #piperSideDock #piperLiveRoom > .piper-live-controls:not(.hidden):not([hidden]) { display:grid!important; }
  #hiveResponsiveDock #piperMobileDock { display:flex; position:fixed; inset:auto; right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); z-index:145; width:auto; max-width:calc(100vw - 24px); flex-wrap:nowrap; gap:8px; margin:0; }
  #hiveResponsiveDock #piperMobileDock #piperMobileLauncher { position:static; inset:auto; flex:0 0 auto; margin:0; }
  #hiveResponsiveDock #piperMobileActions:not([hidden]) { display:flex; flex-wrap:wrap; gap:8px; max-width:calc(100vw - 98px); }
  #hiveResponsiveDock #piperChatPanel { position:fixed!important; inset:auto 12px calc(86px + env(safe-area-inset-bottom))!important; z-index:146; width:auto!important; max-width:calc(100vw - 24px)!important; max-height:65dvh!important; margin:0!important; padding:12px!important; overflow:auto!important; overscroll-behavior:contain; font-size:15px; }
  #hiveResponsiveDock #piperChatPanel .piper-chat-head { display:flex!important; position:static; flex-wrap:wrap; margin:0 0 12px; padding:0 0 10px; gap:8px; }
  #hiveResponsiveDock #piperChatPanel .piper-chat-head h3 { font-size:20px; }
  #hiveResponsiveDock #piperChatPanel :is(#newPiperConversation,#piperConversationHistory):not(.hidden):not([hidden]) { display:inline-flex; }
  #hiveResponsiveDock #piperChatPanel :is(.piper-live-room,.piper-voice-controls):not(.hidden):not([hidden]) { display:block!important; }
  #hiveResponsiveDock #piperChatPanel :is(button,input,textarea,select) { font-size:16px; min-height:44px; max-width:100%; }
  #hiveResponsiveDock #piperChatPanel .piper-composer { display:grid; grid-template-columns:minmax(0,1fr); }
  #hiveResponsiveDock #piperChatPanel textarea { min-height:100px; max-height:none; }
  #hiveResponsiveDock #piperChatPanel :is(p,.piper-message,.piper-history-item,.piper-history-list,.event) { font-size:15px; line-height:1.5; }
  #hiveResponsiveDock #piperChatPanel :is(.piper-messages,.piper-history-list) { max-height:60dvh; overflow:auto; }
  #hiveResponsiveDock #piperChatPanel .piper-voice-controls-grid { grid-template-columns:minmax(0,1fr); }
  #hiveResponsiveDock #piperChatPanel :is(.piper-primary-controls,.piper-secondary-controls) { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
#piperChatPanel[data-piper-preview="true"] .piper-composer,
#piperChatPanel[data-piper-preview="true"] #piperLiveRoom,
#piperChatPanel[data-piper-preview="true"] #piperVoiceControls,
#piperChatPanel[data-piper-preview="true"] #newPiperConversation,
#piperChatPanel[data-piper-preview="true"] #piperConversationHistory,
#piperChatPanel[data-piper-preview="true"] #piperTranscript > summary {display:none!important}