/* =========================================================================
   chat-content.css — экраны «Содержимое чата» (§7), «Управление хранилищем»
   (§8) и «Избранные сообщения» (§9). Самодостаточные полноэкранные оверлеи.
   Палитра через var(--aya-*,#hex) фолбэк (ТЗ §1.2). Тёмная тема — body.dark-theme.
   ========================================================================= */

.cc-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    background: var(--aya-grey-bg, #eef0f2);
    color: var(--text, #1a1d21);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    opacity: 0;
    transition: opacity .22s ease;
    -webkit-tap-highlight-color: transparent;
}
.cc-overlay.cc-show { opacity: 1; }

body.dark-theme .cc-overlay {
    background: #0c1d22;
    color: var(--text, #e6edf3);
}

/* ---- Шапка ---- */
.cc-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px 10px 4px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
    background: var(--panel, #fff);
    border-bottom: 1px solid var(--border, #e6e9ec);
}
body.dark-theme .cc-header {
    background: #11272d;
    border-bottom-color: rgba(255,255,255,.07);
}
.cc-hbtn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--aya-teal, #1a6b82);
    border-radius: 50%;
    cursor: pointer;
}
.cc-hbtn:active { background: var(--aya-grey-bg, #eef0f2); }
body.dark-theme .cc-hbtn:active { background: rgba(255,255,255,.08); }

.cc-htitle {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    line-height: 1.15;
}
.cc-htitle-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text, #1a1d21);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.dark-theme .cc-htitle-name { color: var(--text, #e6edf3); }
.cc-htitle-sub {
    font-size: 13px;
    font-weight: 400;
    color: var(--aya-grey, #8a9499);
    margin-top: 1px;
}
.cc-haction {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--aya-teal, #1a6b82);
    font-size: 16px;
    font-weight: 500;
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.cc-haction:active { opacity: .6; }

/* ---- Полоса поиска ---- */
.cc-searchbar {
    flex: 0 0 auto;
    padding: 8px 16px;
    background: var(--panel, #fff);
    border-bottom: 1px solid var(--border, #e6e9ec);
}
body.dark-theme .cc-searchbar {
    background: #11272d;
    border-bottom-color: rgba(255,255,255,.07);
}
.cc-searchbar.cc-hidden { display: none; }
.cc-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--aya-grey-bg, #eef0f2);
    border-radius: 9999px;
    padding: 8px 14px;
    color: var(--aya-grey2, #52606a);
}
body.dark-theme .cc-search-input-wrap { background: rgba(255,255,255,.07); }
.cc-search-input-wrap .ic { flex: 0 0 auto; opacity: .8; }
.cc-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: 16px;
    color: var(--text, #1a1d21);
}
body.dark-theme .cc-search-input { color: var(--text, #e6edf3); }
.cc-search-input::placeholder { color: var(--aya-grey, #8a9499); }

/* ---- Горизонтальные вкладки (§7) ---- */
.cc-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--panel, #fff);
    border-bottom: 1px solid var(--border, #e6e9ec);
}
.cc-tabs::-webkit-scrollbar { display: none; }
body.dark-theme .cc-tabs {
    background: #11272d;
    border-bottom-color: rgba(255,255,255,.07);
}
.cc-tab {
    flex: 0 0 auto;
    border: none;
    border-radius: 9999px;
    padding: 9px 18px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
    color: var(--aya-grey2, #52606a);
    box-shadow: 0 0 0 1px var(--border, #e6e9ec) inset;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
body.dark-theme .cc-tab {
    background: rgba(255,255,255,.05);
    color: var(--text-secondary, #8b949e);
    box-shadow: none;
}
.cc-tab.cc-active {
    background: var(--aya-teal, #1a6b82);
    color: #fff;
    box-shadow: none;
}

/* ---- Скроллируемое тело ---- */
.cc-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
.cc-empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--aya-grey, #8a9499);
    font-size: 15px;
    line-height: 1.5;
}
.cc-loading {
    padding: 48px 24px;
    text-align: center;
    color: var(--aya-grey, #8a9499);
    font-size: 15px;
}

/* ---- Медиа-грид (§7 Медиа) ---- */
.cc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2px;
}
.cc-grid-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--aya-grey-bg, #eef0f2);
    overflow: hidden;
    cursor: pointer;
}
body.dark-theme .cc-grid-cell { background: rgba(255,255,255,.05); }
.cc-grid-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cc-grid-cell .cc-video-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Список файлов / музыки / голосовых / ссылок (§7) ---- */
.cc-list { padding: 8px 0; }
.cc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--panel, #fff);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.cc-row + .cc-row { border-top: 1px solid var(--border, #f0f0f0); }
body.dark-theme .cc-row { background: transparent; }
body.dark-theme .cc-row + .cc-row { border-top-color: rgba(255,255,255,.06); }

.cc-row-ic {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
    text-transform: uppercase;
}
.cc-row-ic.cc-play {
    background: var(--aya-teal, #1a6b82);
    color: #fff;
}
.cc-row-ic.cc-voice { background: var(--aya-petrol, #005f6d); }
/* воспроизводящаяся строка аудио — подсветка кнопки play */
.cc-row.cc-playing .cc-row-ic.cc-play,
.cc-row.cc-playing .cc-row-ic.cc-voice { box-shadow: 0 0 0 3px rgba(26,107,130,.35); }
.cc-row-ic.cc-link { background: var(--aya-grey-bg, #eef0f2); color: var(--aya-teal, #1a6b82); }
body.dark-theme .cc-row-ic.cc-link { background: rgba(255,255,255,.08); }

.cc-row-main {
    flex: 1 1 auto;
    min-width: 0;
}
.cc-row-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text, #1a1d21);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.dark-theme .cc-row-title { color: var(--text, #e6edf3); }
.cc-row-sub {
    font-size: 13px;
    color: var(--aya-grey, #8a9499);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Бренд-цвета плашек типов файлов (§7.2) */
.cc-ext-pptx { background: #cc5a3a; }
.cc-ext-doc, .cc-ext-docx { background: #1a6b82; }
.cc-ext-zip, .cc-ext-rar, .cc-ext-7z { background: #cc6d33; }
.cc-ext-fb2, .cc-ext-epub { background: #0d3d4f; }
.cc-ext-pdf { background: #d6453a; }
.cc-ext-xls, .cc-ext-xlsx { background: #2f8f5b; }
.cc-ext-ppt { background: #cc5a3a; }
.cc-ext-txt { background: #52606a; }
.cc-ext-other { background: var(--aya-grey, #8a9499); }

/* ---- Управление хранилищем (§8) ---- */
.cc-sort-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text, #1a1d21);
    padding: 14px 16px 8px;
}
body.dark-theme .cc-sort-title { color: var(--text, #e6edf3); }

.cc-stor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 0 2px;
}
.cc-stor-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--aya-grey-bg, #eef0f2);
    overflow: hidden;
    cursor: pointer;
}
body.dark-theme .cc-stor-cell { background: rgba(255,255,255,.05); }
.cc-stor-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cc-stor-cell .cc-stor-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--aya-grey, #8a9499);
}
.cc-stor-size {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,.62);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 9999px;
}
/* кружок-галочка в режиме выбора */
.cc-stor-check {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(0,0,0,.25);
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.cc-overlay.cc-select-mode .cc-stor-check { display: flex; }
.cc-stor-cell.cc-selected .cc-stor-check {
    background: var(--aya-teal, #1a6b82);
    border-color: var(--aya-teal, #1a6b82);
}
.cc-stor-cell.cc-selected::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: 0 0 0 3px var(--aya-teal, #1a6b82) inset;
    pointer-events: none;
}

/* Нижняя панель хранилища */
.cc-stor-footer {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    background: var(--panel, #fff);
    border-top: 1px solid var(--border, #e6e9ec);
}
body.dark-theme .cc-stor-footer {
    background: #11272d;
    border-top-color: rgba(255,255,255,.07);
}
.cc-stor-sortbtn {
    position: absolute;
    left: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--panel, #fff);
    color: var(--aya-teal, #1a6b82);
    box-shadow: 0 2px 10px rgba(6,37,52,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
body.dark-theme .cc-stor-sortbtn { background: #1c2128; }
.cc-stor-total {
    background: var(--panel, #fff);
    box-shadow: 0 1px 6px rgba(6,37,52,.12);
    border-radius: 9999px;
    padding: 10px 22px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text, #1a1d21);
}
body.dark-theme .cc-stor-total { background: #1c2128; color: var(--text, #e6edf3); }
.cc-stor-delete {
    border: none;
    border-radius: 9999px;
    padding: 12px 26px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--aya-orange2, #cc6d33);
    cursor: pointer;
}
.cc-stor-delete:disabled { opacity: .5; }

/* Попап сортировки */
.cc-sort-pop {
    position: absolute;
    left: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 66px);
    min-width: 170px;
    background: var(--panel, #fff);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(6,37,52,.22);
    overflow: hidden;
    z-index: 5;
}
body.dark-theme .cc-sort-pop { background: #1c2128; }
.cc-sort-opt {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 14px 18px;
    font-size: 16px;
    color: var(--text, #1a1d21);
    cursor: pointer;
}
body.dark-theme .cc-sort-opt { color: var(--text, #e6edf3); }
.cc-sort-opt + .cc-sort-opt { border-top: 1px solid var(--border, #f0f0f0); }
body.dark-theme .cc-sort-opt + .cc-sort-opt { border-top-color: rgba(255,255,255,.06); }
.cc-sort-opt.cc-active { color: var(--aya-teal, #1a6b82); font-weight: 600; }

/* ---- Избранные сообщения (§9) ---- */
.cc-star-list {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
}
.cc-star-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 0;
}
.cc-star-item + .cc-star-item { border-top: 1px solid var(--border, #e0e4e7); }
body.dark-theme .cc-star-item + .cc-star-item { border-top-color: rgba(255,255,255,.07); }

.cc-star-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--aya-teal, #1a6b82);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    margin-top: 2px;
}
.cc-star-avatar img { width: 100%; height: 100%; object-fit: cover; }

.cc-star-main { flex: 1 1 auto; min-width: 0; }
.cc-star-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.cc-star-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text, #1a1d21);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.dark-theme .cc-star-name { color: var(--text, #e6edf3); }
.cc-star-date {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--aya-grey, #8a9499);
}

.cc-bubble {
    border-radius: 16px;
    padding: 10px 13px;
    font-size: 16px;
    line-height: 1.4;
    max-width: 100%;
    box-shadow: 0 1px 2px rgba(6,37,52,.07);
}
.cc-bubble.cc-other {
    background: #fff;
    color: #000;
    border-top-left-radius: 4px;
}
body.dark-theme .cc-bubble.cc-other {
    background: #243338;
    color: #e8edee;
}
.cc-bubble.cc-own {
    background: linear-gradient(180deg, #1f7d92, #105c6c);
    color: #fff;
    border-top-right-radius: 4px;
    margin-left: auto;
}
.cc-star-row.cc-own .cc-bubble-wrap { display: flex; justify-content: flex-end; }
.cc-bubble-wrap { display: flex; }

.cc-bubble-fwd {
    font-size: 13px;
    color: var(--aya-grey, #8a9499);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.cc-bubble.cc-own .cc-bubble-fwd { color: rgba(255,255,255,.82); }
.cc-bubble-file {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cc-bubble-file .cc-row-ic { width: 42px; height: 42px; }
.cc-bubble-file-name { font-size: 15px; font-weight: 500; }
.cc-bubble-file-sub { font-size: 13px; opacity: .7; margin-top: 1px; }
.cc-bubble-img {
    border-radius: 12px;
    overflow: hidden;
    max-width: 220px;
}
.cc-bubble-img img { width: 100%; display: block; }

.cc-bubble-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--aya-orange2, #cc6d33);
    font-weight: 600;
}
.cc-bubble.cc-own .cc-bubble-foot { color: #ffd9b8; }
.cc-bubble-foot .cc-star-ic {
    display: inline-flex;
    width: 14px;
    height: 14px;
}
.cc-bubble-foot .cc-star-ic svg { width: 14px; height: 14px; }

/* Шеврон-переход к сообщению (§9 — ключевая функция) */
.cc-star-jump {
    flex: 0 0 auto;
    align-self: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--aya-grey, #8a9499);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cc-star-jump:active { color: var(--aya-teal, #1a6b82); }

/* режим «Изменить» — кружок удаления слева */
.cc-star-del {
    flex: 0 0 auto;
    align-self: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--aya-grey, #8a9499);
    background: transparent;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}
.cc-overlay.cc-edit-mode .cc-star-del { display: flex; }
.cc-overlay.cc-edit-mode .cc-star-jump { display: none; }
.cc-star-item.cc-marked .cc-star-del {
    background: var(--aya-orange2, #cc6d33);
    border-color: var(--aya-orange2, #cc6d33);
}

/* Подсветка сообщения после перехода из «Избранных» (§9). Класс вешается
   на .message-mobile, отрисованный chat-view.js. Аддитивно, base.css не трогаем. */
.message-mobile.jump-highlight { animation: cc-jump-flash 1.6s ease; }
@keyframes cc-jump-flash {
    0%, 30% { background: rgba(26,107,130,.18); border-radius: 12px; }
    100% { background: transparent; }
}