/* Remaining phone panels share the available shell instead of imposing a desktop height. */
@media(max-width:768px) {
 html .color_engine-panel {
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  min-height:0 !important; max-height:100%; box-sizing:border-box; overflow:auto;
  overscroll-behavior:contain; scroll-padding-top:68px;
 }
 html .color_engine-tabs {
  position:sticky; top:0; width:auto; margin:0 0 16px; padding:8px;
  border-radius:20px 20px 0 0; background:#303642; overflow-x:auto; box-sizing:border-box;
 }
 html .color_engine-tab { flex:0 0 auto; min-height:44px; padding:8px 12px; font-size:12px; }
 html .color_engine-panel > [data-section] {
  position:relative; inset:auto; width:100%; box-sizing:border-box; padding:0 16px 20px;
  display:none; transform:none;
 }
 html .color_engine-panel[data-active-section="text"] > [data-section="text"],
 html .color_engine-panel[data-active-section="panel"] > [data-section="panel"],
 html .color_engine-panel[data-active-section="border"] > [data-section="border"],
 html .color_engine-panel[data-active-section="button"] > [data-section="button"],
 html .color_engine-panel[data-active-section="arc"] > [data-section="arc"] { display:block; }
 html .color_engine-panel :is(.color-picker-rgba-container,.color-picker-recent-container,.color-picker-hex-container,.color-picker-slider-container) {
  width:100%; max-width:320px; position:relative !important; inset:auto !important; box-sizing:border-box;
 }
 html .color-picker-rgba-input { box-sizing:border-box; font-size:14px; }
 html .color-picker-reset-btn {
  position:relative; inset:auto; display:block; width:100%; max-width:320px; min-height:44px;
  height:auto; margin:20px auto 0; font-size:12px; line-height:1.4;
 }
 html .color-picker-reset-btn::after { content:none; }
 html .comment-creator__row {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px;
 }
 html .comment-creator__alias { min-width:0; width:100%; box-sizing:border-box; }
 html .comment-creator__tnc { position:static; min-height:36px; box-sizing:border-box; padding:6px; }
 html .comment-creator__tag-dd { min-width:0; padding:7px 8px; box-sizing:border-box; }
 html .comment-creator__tnc-tip {
  inset:calc(100% + 8px) 0 auto auto; width:100%; box-sizing:border-box;
  max-height:220px; overflow:auto; font-size:12px;
 }
 html .comment-creator__footer,
 html .comment-panel__filters { flex-wrap:wrap; gap:8px; }
 html .comment-creator__input { min-width:0; box-sizing:border-box; }
 /* Reserve the complete visible viewport for chat while the software keyboard is up. */
 html.mobile-billie-keyboard :is(.icon-bar,.day-cycle-arc__settings-gear,.ivy-logs-btn,.day-cycle-arc__phase-clock) { visibility:hidden !important; pointer-events:none !important; }
 html.mobile-billie-keyboard .glass-panel {
  position:fixed !important; top:calc(var(--mobile-visible-top,0px) + 8px) !important;
  left:2% !important; right:2% !important; bottom:auto !important; width:96% !important;
  height:calc(var(--mobile-visible-height,100dvh) - 16px) !important;
  min-height:0 !important; max-height:none !important; transform:none !important;
 }
 html.mobile-billie-keyboard body:not(.ivy-guardian-mode) .ai-panel {
  inset:0 !important; width:100% !important; height:100% !important; transform:none !important;
 }
 html.mobile-billie-keyboard body:not(.ivy-guardian-mode) .ai-panel__input {
  bottom:8px; width:calc(100% - 16px) !important; max-width:none;
 }
 html.mobile-billie-keyboard body:not(.ivy-guardian-mode) .ai-panel__input-pill { bottom:0; width:100%; box-sizing:border-box; }
 html.mobile-billie-keyboard .ai-panel__toggle { visibility:hidden; }
}