/* ==========================================================================
   Mobile Shell — Figma node 29723:37420  (tIGshAcTyBw7tLLptHDpy4)
   375 × 812 mobile app frame with three regions:
     • Header                  — title (icon-above-text) + burger
     • Tabs bar (Slot 2, 68px) — "הרצאות" active heading + dropdown button
     • Content (Slot)          — flex-1 scrollable
     • Footer (Slot 3, 64px)   — 3 nav tabs + circular dashboard widget
   All values from Figma variables — never hardcoded.
   ========================================================================== */

.mob-shell {
  position: relative;
  width: 375px;
  height: 812px;
  margin: 0 auto;
  background: var(--ta-color-bg-base);
  font-family: var(--font-family-app);
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-2xl);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.10);
}

/* ─────────────── Header (Frame 29723:36393) ───────────────
   padding 16, gap 16, justify-center.
   Inner row (29723:36394): items-start, justify-between, full width.
*/
.mob-shell__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--ta-color-bg-base);
}
.mob-shell__header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
/* Title column (29723:36395): icon-above-text, 51px wide, gap 3, items-center */
.mob-shell__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 51px;
}
.mob-shell__title-icon {
  width: 16.671px;
  height: 18.6px;
  display: block;
  color: var(--ta-color-text-default);
}
.mob-shell__title-icon svg { width: 100%; height: 100%; display: block; }
.mob-shell__title-text {
  font-family: var(--font-family-app);
  font-size: 10px;
  font-weight: var(--font-weight-regular);
  line-height: 1.243;
  letter-spacing: -0.1px;
  color: var(--ta-color-text-default);
  text-align: center;
}
/* Burger 24×24 (29723:36409) */
.mob-shell__menu {
  width: 24px;
  height: 24px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--ta-color-text-default);
}
.mob-shell__menu svg { width: 100%; height: 100%; display: block; }


/* ─────────────── Tabs bar (Slot 2 = 29723:37400) ───────────────
   Height 68. Gradient bg (the "tab bar" look user requested).
   Border-bottom subtle. Padding-x 16. gap 8 (--space-sm).
   In RTL: right group ("הרצאות" + lectures icon) first, button last.
*/
.mob-shell__tabs {
  flex: 0 0 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;     /* Figma: ~118px empty gap in the middle */
  padding: 0 var(--space-lg);
  border-top: 1px solid var(--ta-color-border-subtle);
  border-bottom: 1px solid var(--ta-color-border-subtle);
  /* Gradient sampled from Figma slot2-bg: dark top → light bottom */
  background: linear-gradient(
    180deg,
    #e7e7e7 0%,
    #f2f2f2 50%,
    #fdfdfd 100%
  );
}
/* Right group (29723:37403/37404) — fixed width 95, gap 12 internal.
   In RTL: first DOM (icon) renders RIGHT, second (text) renders LEFT. */
.mob-shell__tabs-main {
  display: flex;
  align-items: center;
  gap: var(--space-md);               /* 12 — Figma internal gap */
  width: 95px;                        /* fixed per Figma 29723:37403 */
  flex-shrink: 0;
}
.mob-shell__tabs-main-text {
  font-family: var(--font-family-app);
  font-size: var(--font-size-h2);     /* 20 — Figma heading-sub (= h2 token) */
  font-weight: var(--font-weight-regular);
  line-height: 1;
  color: var(--ta-color-text-default);
}
.mob-shell__tabs-main-icon {
  width: 24px;
  height: 24px;
  display: block;
  color: var(--ta-color-text-default);
  flex-shrink: 0;
}
.mob-shell__tabs-main-icon svg { width: 100%; height: 100%; display: block; }

/* Tab-select (Figma node 38045:7956) — "משלוח כרטיס" button.
   NOT a Button System button: plain element, no hover, border-right acts as
   the divider (חוצץ) immediately after the button. Width 130 fixed per Figma. */
.mob-shell__tabs-select {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);              /* 8 — Figma internal gap chevron↔text */
  height: 100%;
  width: 130px;                      /* fixed per Figma 38045:7956 */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ta-color-text-default);
  border-right: 1px solid var(--ta-color-border-subtle);   /* the חוצץ */
  flex-shrink: 0;
}
.mob-shell__tabs-select:hover { background: none; }         /* explicit: no hover */
.mob-shell__tabs-select-text {
  width: 70px;                                              /* fixed width per Figma */
  font-family: var(--font-family-app);
  font-size: var(--font-size-button-category);              /* 14px */
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--ta-color-text-default);
  text-align: right;
}
.mob-shell__tabs-select-icon {
  width: 16px;                                              /* 16×16 per Figma, not 20 */
  height: 16px;
  display: block;
  color: var(--ta-color-text-default);
  flex-shrink: 0;
}
.mob-shell__tabs-select-icon svg { width: 100%; height: 100%; display: block; }


/* ─────────────── Content (Slot 29723:36414) ─────────────── */
.mob-shell__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--ta-color-bg-base);
}


/* ─────────────── Footer (Slot 3 = 29955:5192) ───────────────
   Height 64. bg white. drop-shadow upward (1px -1px 2.75 rgba(141,141,141,.25)).
   gap 12. padding-x 16. items-end (so tabs hug the bottom).
   RTL DOM order: tab תמיכה → tab קופה → tab פעולות → dashboard widget (leftmost).
*/
.mob-shell__footer {
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-lg);
  background: var(--ta-color-bg-base);
  filter: drop-shadow(1px -1px 2.75px rgba(141, 141, 141, 0.25));
  position: relative;
}
/* Tab item (Frame 30206:13087 etc.): flex-col, gap 4, items-center, justify-center */
.mob-shell__tab {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ta-color-text-default);
}
.mob-shell__tab-icon {
  width: 20px;
  height: 20px;
  display: block;
  color: var(--ta-color-text-default);
}
.mob-shell__tab-icon svg { width: 100%; height: 100%; display: block; }
.mob-shell__tab-label {
  font-family: var(--font-family-app);
  font-size: 10px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  color: var(--ta-color-text-default);
  text-align: center;
  white-space: pre-line;
}


/* כפתור AI צף — CTA עיגול 44, מרחף מעל ה-footer (RTL: צד שמאל) */
.mob-shell__ai {
  position: absolute;
  inset-inline-end: var(--space-lg);
  bottom: calc(64px + var(--space-lg));   /* גובה footer 64 + רווח 16 */
  z-index: 5;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* ─────────────── Dashboard widget (Frame 30250:42462) ───────────────
   Wrapper 77×86 with padding-bottom 16 → widget extends above footer baseline.
   Inner 70×70 with circular progress ring + center icon.
   The ring is a conic-gradient (Turquoise/700 → Turquoise/400) representing
   progress; full ring = 100%. Inner mask (52×52 surface bg) creates the
   "ring" cutout. Icon centered inside.
*/
.mob-shell__dash {
  width: 77px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--space-lg);
  flex-shrink: 0;
  margin-top: -22px;                  /* lifts widget above footer baseline */
}
.mob-shell__dash-btn {
  position: relative;
  width: 70px;
  height: 70px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: none;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25));
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Progress ring — SVG with stroke-dasharray driving animated fill.
   Turquoise gradient (700 → 400) along the stroke, sweep target 75% of
   the circle so a small gap remains (matches Figma's open-ring design).
   The fill animates from 0 → target on mount. To change the target,
   modify the `to` value of the dash-ring-fill keyframe. */
.mob-shell__dash-ring {
  position: absolute;
  inset: -2px;       /* 74×74 wrapper extending 2px beyond the 70×70 button */
  width: 74px;
  height: 74px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.mob-shell__dash-ring-arc {
  stroke-dasharray: 0 100;
  animation: dash-ring-fill 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes dash-ring-fill {
  from { stroke-dasharray: 0 100; }
  to   { stroke-dasharray: 75 100; }   /* 75% of circle visible */
}
/* Inner button — Button System Primary CTA pattern, 52×52.
   Background = 2 layers (per user spec): white base + surface overlay.
   Using a denser overlay (rgba(0,0,0,0.08)) so the gray actually reads as
   a button against the white footer — pure surface (0.05) was so faint it
   looked like an empty area.
   White line = explicit 3px white box-shadow ring outside the button. */
.mob-shell__dash-inner {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-grays-100);  /* #f5f5f5 — visible light gray (one step lighter than 200) */
  /* The thin white separator between the turquoise progress ring and the
     inner button — explicit 3px solid white outline. */
  box-shadow: 0 0 0 3px var(--ta-color-bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ta-color-text-default);
}
.mob-shell__dash-icon {
  width: 22px;
  height: 22px;
  display: block;
}
.mob-shell__dash-icon svg { width: 100%; height: 100%; display: block; }