/* public/css/study/study-projects.css
   ─────────────────────────────────────────────────────────────────────────────
   Ask AI "attach a project" (public/js/study/study-projects.js): the chip that
   sits above the composer while a folder is attached.

   Deliberately the same white-card-with-a-line-icon language as
   .dt2-pending-doc (the per-file attachment chips), so a folder reads as one
   more thing attached to the message rather than a new kind of UI. Those chips
   are styled from the injected block inside study-deeptutor.js; this is a real
   stylesheet because it belongs to this module, not to that one.
   ───────────────────────────────────────────────────────────────────────────── */

.khio-proj-chip-row {
    display: flex;
    padding: 0 2px 6px;
}

.khio-proj-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 320px;
    padding: 9px 34px 9px 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
    color: #7c5230;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.khio-proj-chip:hover {
    border-color: rgba(232, 133, 58, 0.38);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.07);
}

.khio-proj-chip svg { flex: 0 0 auto; }

.khio-proj-chip-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.khio-proj-chip-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1a1410);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.khio-proj-chip-sub {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-tertiary, #9a8f86);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* What was left out of the folder, and whether the project is big enough that
   replies will be slower. It used to live in the chip's title attribute, which
   no phone has ever shown anyone. Amber rather than grey: it is a caveat, not
   more metadata. */
.khio-proj-chip-note {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    color: #a8600f;
    line-height: 1.3;
}

html[data-theme="dark"] .khio-proj-chip-note { color: #e3a857; }

.khio-proj-chip-x {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-secondary, #7a6e63);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.khio-proj-chip-x:hover {
    background: rgba(15, 23, 42, 0.12);
    color: var(--text-primary, #1a1410);
}

html[data-theme="dark"] .khio-proj-chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

html[data-theme="dark"] .khio-proj-chip-x {
    background: rgba(255, 255, 255, 0.09);
}