/* =============================================================================
   fh-modal.css v14.1.0
   --------------------------------------------------------------------------
   v14.0.0  UI redesign — refined header, smooth animations, mobile bottom-sheet.
   v14.0.1  Fix: minimized bar default is `display: flex` (not `none`).
            Bar wouldn't appear because show() helper only clears inline display.
   v14.0.2  Fix: window controls (Minimize / Maximize / Close) are now pinned
            to the TOP-RIGHT of the header on every screen size, regardless of
            how many tabs are present. Previously, with 6 tabs, flex-wrap
            pushed them onto a third row below the tab strip — invisible.
            Now: row 1 = title + controls,  row 2 = tabs (scrollable).
   v14.1.0  House apps are DB-driven; tabs rendered by fh-core.js. Generic
            per-tab unread dot. Phones: apps that don't fit the strip move
            into a "More" menu (see fh-modal.js layoutTabs / openMenu).
   ============================================================================= */

:root {
  /* Set this in your theme CSS to keep your left menu visible on maximize.
     Example:  :root { --gp-fh-side-menu-width: 260px; } */
  --gp-fh-side-menu-width: 0px;

  --gp-fh-modal-radius: 14px;
  --gp-fh-accent: #6366f1;
  --gp-fh-accent-dark: #4f46e5;
  --gp-fh-ink: #0f172a;
  --gp-fh-ink-2: #475569;
  --gp-fh-muted: #64748b;
  --gp-fh-line: #eef2f6;
  --gp-fh-surface: #f8fafc;
  --gp-fh-shadow-lg: 0 24px 64px -12px rgba(15, 23, 42, .25);
  --gp-fh-shadow-md: 0 10px 32px -8px rgba(15, 23, 42, .14);
  --gp-fh-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 4px rgba(15, 23, 42, .06);
}

/* ── Overlay ───────────────────────────────────────────────────────────── */
.gp-fh-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, .58);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: gp-fh-fade-in .18s ease-out;
}
@keyframes gp-fh-fade-in { from { opacity: 0 } to { opacity: 1 } }

/* ── Modal Shell ───────────────────────────────────────────────────────── */
.gp-fh-modal {
  background: #fff;
  border-radius: var(--gp-fh-modal-radius);
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--gp-fh-shadow-lg);
  transition: max-width .25s ease, max-height .25s ease, height .25s ease, border-radius .25s ease;
  animation: gp-fh-modal-in .22s cubic-bezier(.16, 1, .3, 1);
}
@keyframes gp-fh-modal-in {
  from { opacity: 0; transform: translateY(6px) scale(.985) }
  to   { opacity: 1; transform: translateY(0)    scale(1) }
}

/* ═════════════════════════════════════════════════════════════════════════
   HEADER  — two-row layout enforced via flex `order` and `flex-basis`
   --------------------------------------------------------------------------
   Row 1:  Title (left, grows)  |  Controls (right, fixed)
   Row 2:  Tabs (full width, horizontally scrollable)

   HTML order in PHP stays:  Title → Tabs → Controls
   CSS order shifts visual:  Title (1) → Controls (2) → Tabs (3)
   `flex-basis: 100%` on the tab strip forces it to wrap onto its own row,
   guaranteeing controls never get pushed below the tabs.
   ═════════════════════════════════════════════════════════════════════════ */
.gp-fh-modal-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 20px;
  border-bottom: 1px solid var(--gp-fh-line);
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
  flex-shrink: 0;
}

.gp-fh-modal-title {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  color: var(--gp-fh-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -.01em;
}
.gp-fh-modal-title i { color: var(--gp-fh-accent); font-size: 15px; flex-shrink: 0; }
.gp-fh-modal-title #gp-fh-modal-house-name,
.gp-fh-modal-title > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* Window controls — pinned to top-right corner of the header (row 1) */
.gp-fh-modal-controls {
  order: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* Tabs — always on row 2 (full width, can scroll horizontally) */
.gp-fh-modal-tabs {
  order: 3;
  flex: 0 0 100%;       /* basis 100% forces the wrap onto a new line */
  width: 100%;
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px;
  margin-top: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.gp-fh-modal-tabs::-webkit-scrollbar { display: none; }

.gp-fh-mtab {
  background: transparent; border: 0;
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--gp-fh-muted);
  cursor: pointer;
  border-radius: 7px;
  transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  position: relative; white-space: nowrap;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.gp-fh-mtab:hover { color: var(--gp-fh-ink); background: rgba(255, 255, 255, .5); }
.gp-fh-mtab.active {
  background: #fff; color: var(--gp-fh-ink);
  box-shadow: var(--gp-fh-shadow-sm);
}
.gp-fh-mtab.active i { color: var(--gp-fh-accent); }

/* Unread dot on chat tab */
.gp-chat-unread-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
  display: inline-block; position: absolute; top: 4px; right: 4px;
  box-shadow: 0 0 0 2px #fff;
}

/* Sub-modal headers (no tabs, no window controls — just title + ×).
   The single close button gets pushed right via margin-left:auto so the
   layout still works without the controls cluster. */
.gp-fh-modal-close {
  width: 32px; height: 32px;
  border: 0; border-radius: 8px;
  background: var(--gp-fh-surface);
  color: var(--gp-fh-ink-2);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.gp-fh-modal-close:hover { background: #e2e8f0; color: var(--gp-fh-ink); }

.gp-fh-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.gp-fh-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--gp-fh-line);
  background: var(--gp-fh-surface);
  display: flex; justify-content: flex-end; gap: 8px;
  flex-shrink: 0;
}

/* ── Window Control Buttons ────────────────────────────────────────────── */
.gp-fh-modal-wbtn {
  width: 32px; height: 32px;
  border: 0; border-radius: 8px;
  background: var(--gp-fh-surface); color: var(--gp-fh-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: all .15s;
  flex-shrink: 0;
}
.gp-fh-modal-wbtn:hover { background: #e2e8f0; color: var(--gp-fh-ink); transform: translateY(-1px); }
.gp-fh-modal-wbtn:active { transform: translateY(0); }
.gp-fh-modal-wbtn.gp-fh-modal-close-btn:hover { background: #fef2f2; color: #dc2626; }

/* ── Minimized State ───────────────────────────────────────────────────── */
.gp-fh-modal-overlay.gp-fh-modal--minimized {
  background: transparent; pointer-events: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  animation: none;
}
.gp-fh-modal--minimized .gp-fh-modal { display: none; }

/* v14.0.1: default is `display: flex`, NOT `display: none`.
   HTML element has inline style="display:none;" for initial hide.
   show() clears inline display → CSS `flex` takes over → bar appears. */
.gp-fh-minimized-bar {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%); z-index: 10000;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #fff;
  border-radius: 14px;
  padding: 12px 22px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  box-shadow: 0 12px 40px -8px rgba(15, 23, 42, .5);
  transition: transform .2s, box-shadow .2s;
  max-width: 420px;
  font-size: 14px; font-weight: 500;
  pointer-events: auto;
}
.gp-fh-minimized-bar:hover {
  transform: translateX(-50%) translateY(-3px);
  box-shadow: 0 16px 48px -8px rgba(15, 23, 42, .6);
}
.gp-fh-minimized-bar i { opacity: .8; }
.gp-fh-minimized-bar .gp-fh-min-hint { font-size: 11px; opacity: .55; margin-left: auto; }

/* ── Maximized State — extends horizontally too (v14.0.0 fix) ─────────── */
.gp-fh-modal-overlay.gp-fh-modal--maximized {
  padding: 0;
  left: var(--gp-fh-side-menu-width, 0);
}
.gp-fh-modal--maximized .gp-fh-modal {
  max-width: 100% !important;
  width: 100%;
  max-height: 100vh;
  height: 100vh;
  border-radius: 0;
  animation: none;
}
.gp-fh-modal--maximized .gp-fh-modal-body { flex: 1; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .gp-fh-modal-overlay {
    padding: 0;
    left: 0 !important;     /* ignore side-menu offset on mobile */
  }
  .gp-fh-modal {
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    max-width: 100% !important;
    animation: gp-fh-slide-up .25s cubic-bezier(.16, 1, .3, 1);
  }
  @keyframes gp-fh-slide-up {
    from { opacity: 0; transform: translateY(16px) }
    to   { opacity: 1; transform: translateY(0) }
  }
  .gp-fh-modal-header {
    padding: 12px 12px 12px 14px;
    padding-top: max(12px, env(safe-area-inset-top));
    gap: 8px;
  }
  .gp-fh-modal-title { font-size: 15px; }
  .gp-fh-mtab { padding: 9px 12px; font-size: 12.5px; }
  .gp-fh-mtab i { font-size: 12px; }
  .gp-fh-modal-body { padding: 14px; }
  .gp-fh-modal-footer {
    padding: 12px 14px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .gp-fh-modal-wbtn { width: 36px; height: 36px; font-size: 13px; }
  .gp-fh-modal-close { width: 36px; height: 36px; }

  /* Maximize button is redundant on mobile — modal is already full screen */
  #gp-fh-modal-maximize { display: none !important; }

  .gp-fh-minimized-bar {
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px; right: 12px;
    transform: none;
    max-width: none;
    border-radius: 12px;
  }
  .gp-fh-minimized-bar:hover { transform: translateY(-2px); }
}

@media (max-width: 420px) {
  .gp-fh-modal-header { padding: 10px 10px 10px 12px; }
  .gp-fh-modal-controls { gap: 2px; }
  .gp-fh-modal-title { font-size: 14.5px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   v14.1 — DB-driven tabs + phone "More" apps menu
   ═════════════════════════════════════════════════════════════════════════ */

/* Unread dot available on every app tab (id: gp-{app}-unread-dot) */
.gp-fh-mtab-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
  display: inline-block; position: absolute; top: 4px; right: 4px;
  box-shadow: 0 0 0 2px #fff;
}

/* Collapsed strip: no sideways scrolling, overflowed tabs live in the menu */
.gp-fh-modal-tabs.gp-fh-tabs--collapsed { overflow: hidden; scroll-snap-type: none; }
.gp-fh-modal-tabs .gp-fh-mtab.gp-fh-mtab--overflow { display: none !important; }
.gp-fh-modal-tabs .gp-fh-mtab-more[hidden] { display: none !important; }

.gp-fh-modal-tabs .gp-fh-mtab-more {
  margin-left: auto;              /* sits at the right end of the strip */
  color: var(--gp-fh-ink-2);
  scroll-snap-align: end;
}
.gp-fh-modal-tabs .gp-fh-mtab-more.is-open {
  background: #fff; color: var(--gp-fh-ink);
  box-shadow: var(--gp-fh-shadow-sm);
}
.gp-fh-modal-tabs .gp-fh-mtab-more.is-open i { color: var(--gp-fh-accent); }
.gp-fh-more-count {
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
  border-radius: 9px; background: #e0e7ff; color: var(--gp-fh-accent-dark);
  font-size: 11px; font-weight: 650; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
/* An app hidden in the menu has unread activity → dot on More */
.gp-fh-modal-tabs:has(.gp-fh-mtab--overflow .gp-fh-mtab-dot:not([style*="none"])) .gp-fh-mtab-more::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
  box-shadow: 0 0 0 2px #fff;
}

/* The menu (inside #gp-fh-modal-overlay, positioned under the More button) */
.gp-fh-app-menu {
  position: absolute; z-index: 10002;
  width: max-content; min-width: 230px;
  max-width: min(320px, calc(100vw - 16px));
  overflow-y: auto; overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: var(--gp-fh-shadow-lg);
  padding: 6px;
  transform-origin: top right;
  animation: gp-fh-menu-in .14s cubic-bezier(.16, 1, .3, 1);
}
.gp-fh-app-menu[hidden] { display: none; }
@keyframes gp-fh-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98) }
  to   { opacity: 1; transform: none }
}
.gp-fh-app-menu-head {
  font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: #94a3b8; padding: 6px 10px 4px;
}
.gp-fh-app-menu .gp-fh-app-menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 48px;          /* comfortable touch target */
  padding: 8px 10px; margin: 0;
  border: 0; border-radius: 8px; box-shadow: none;
  background: transparent; color: var(--gp-fh-ink);
  font: inherit; line-height: 1.3; text-align: left;
  text-transform: none; letter-spacing: normal;
  cursor: pointer;
}
.gp-fh-app-menu .gp-fh-app-menu-item:hover,
.gp-fh-app-menu .gp-fh-app-menu-item:focus-visible { background: #f1f5f9; outline: none; }
.gp-fh-app-menu .gp-fh-app-menu-item:active { background: #e2e8f0; }
.gp-fh-app-menu-ico {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px; background: #eef2ff; color: var(--gp-fh-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.gp-fh-app-menu-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gp-fh-app-menu-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.gp-fh-app-menu-desc { font-size: 12px; color: var(--gp-fh-muted); white-space: normal; }
.gp-fh-app-menu-chev { color: #cbd5e1; font-size: 11px; flex-shrink: 0; }
.gp-fh-app-menu-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .gp-fh-app-menu { animation: none; }
}