/* static/css/cookbook.css
 * My Cookbook — segmented group-by control + empty states.
 * Per design_handoff_cookbook_empty. Rendered by static/js/chat/loaders/list.js.
 * Classes are ck-prefixed to avoid clashing with Bootstrap (.btn, .seg, .empty).
 */

/* ===== Group-by segmented control ===== */
.cookbook-view-toolbar.ck-toolbar {
    display: flex; align-items: center; gap: 12px;
    margin: 4px 0 18px;
}
.ck-gb-label {
    font-size: 12px; font-weight: 700; color: #6c757d;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ck-segmented {
    display: inline-flex; gap: 2px; padding: 4px;
    background: #f1f3f5; border-radius: 12px;
}
.ck-seg {
    border: none; cursor: pointer; background: transparent;
    height: 36px; padding: 0 16px; border-radius: 9px;
    font-family: inherit; font-size: 13.5px; font-weight: 600; color: #495057;
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.ck-seg i { font-size: 12px; opacity: 0.75; }
.ck-seg:hover { color: #212529; }
.ck-seg.active {
    background: #fff; color: #ef4707;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.10), 0 2px 6px rgba(17, 24, 39, 0.06);
}
.ck-seg.active i { opacity: 1; color: #fe6211; }

/* ===== Empty state ===== */
.ck-empty {
    flex: 1; min-height: 360px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 32px 24px;
}
.ck-empty-art {
    position: relative; width: 132px; height: 132px; margin-bottom: 26px;
    display: flex; align-items: center; justify-content: center;
}
.ck-empty-art .ck-disc {
    position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #fff1e2, #ffe2c8);
}
.ck-empty-art .ck-book {
    position: relative; width: 64px; height: 64px; border-radius: 20px;
    background: linear-gradient(150deg, #ff914d, #ef4707);
    color: #fff; font-size: 27px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 24px -6px rgba(254, 98, 17, 0.5);
}
.ck-empty-art .ck-plate { position: relative; width: 104px; height: 104px; }
.ck-empty-art .ck-chip {
    position: absolute; width: 34px; height: 34px; border-radius: 11px; background: #fff;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.10);
    display: flex; align-items: center; justify-content: center; font-size: 14px; z-index: 1;
}
.ck-empty-art .ck-chip.c1 { top: 6px; right: 2px; color: #069bf1; transform: rotate(8deg); }
.ck-empty-art .ck-chip.c2 { bottom: 8px; left: 0; color: #1f8a4c; transform: rotate(-10deg); }

.ck-empty h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: #212529; }
.ck-empty p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: #495057; max-width: 42ch; text-wrap: balance; }

.ck-empty-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ck-btn {
    height: 48px; border-radius: 13px; cursor: pointer; border: none; text-decoration: none;
    font-family: inherit; font-size: 14.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.ck-btn-primary {
    padding: 0 24px; background: #fe6211; color: #fff;
    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.10), 0 1px 2px rgba(17, 24, 39, 0.06);
}
.ck-btn-primary:hover { background: #ef4707; color: #fff; box-shadow: 0 6px 14px rgba(254, 98, 17, 0.28); }
.ck-btn-primary:active { transform: translateY(1px); }
.ck-btn-ghost { padding: 0 22px; background: #fff; color: #212529; border: 1.5px solid #e9ecef; }
.ck-btn-ghost:hover { background: #f8f9fa; border-color: #dee2e6; color: #212529; }

.ck-empty-hint { margin-top: 22px; font-size: 12.5px; color: #adb5bd; display: inline-flex; align-items: center; gap: 7px; }
.ck-empty-hint i { color: #ff914d; }

/* ===== Panel header ===== */
.ck-head { margin: 2px 0 4px; }
.ck-head h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #212529; }
.ck-head .ck-sub { margin: 4px 0 0; font-size: 13.5px; color: #6c757d; }

/* ============================================================
   Mobile (≤576px) — per design_handoff_cookbook_empty_mobile.
   Same component; the segmented control becomes a scrollable
   chip row, CTAs stack full-width, and the panel title/subtitle
   is dropped (the app's mobile brand header serves as the header).
   ============================================================ */
@media (max-width: 576px) {
    .ck-head { display: none; }

    .cookbook-view-toolbar.ck-toolbar {
        flex-direction: column; align-items: stretch; gap: 8px; margin: 2px 0 14px;
    }
    .ck-gb-label { padding-left: 2px; }
    /* Pill track → wrapping chip rows. Was a horizontal scroll with the
       scrollbar hidden — a half-clipped trailing pill was the only cue and
       it read as a rendering bug (her screenshot 2026-08-18). Four chips
       wrap to a second line instead; nothing is ever cut. */
    .ck-segmented {
        display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 4px;
        background: transparent; border-radius: 0;
    }
    .ck-seg {
        flex: none; height: 38px; padding: 0 15px; border-radius: 11px;
        background: #fff; border: 1.5px solid #e9ecef; color: #495057;
        font-size: 13px; box-shadow: none;
    }
    .ck-seg:hover { color: #495057; }
    .ck-seg.active {
        background: #fe6211; border-color: #fe6211; color: #fff; box-shadow: none;
    }
    .ck-seg.active i { color: #fff; opacity: 1; }

    /* Empty state — smaller art, stacked full-width CTAs */
    .ck-empty { padding: 8px 26px 24px; }
    .ck-empty-art { width: 124px; height: 124px; margin-bottom: 22px; }
    .ck-empty h2 { font-size: 19px; }
    .ck-empty p { font-size: 13.5px; max-width: 30ch; }
    .ck-empty-actions { flex-direction: column; flex-wrap: nowrap; width: 100%; max-width: 260px; }
    .ck-btn { width: 100%; }
}