/* ============================================================
   ФОРМА СОЗДАНИЯ ТИКЕТА (модалка, cabinet.html)
   Структура: .ticket-modal > #createTicketForm > .card > .ticket-form >
   .ticket-form-row > .ticket-form-fields > .ticket-form-main >
   (.ticket-form-stacked > чип категории + поле названия + поле причины)
   и #ticketFormActions (колонка «Создать тикет» + «Прикрепить файл»).
   created_at сообщений в API — UTC, сроки удаления — МСК (см. бота).
   ============================================================ */

/* --- поля формы --- */
.ticket-form{display:flex;flex-direction:column;gap:10px;align-items:center}
.ticket-form input,.ticket-form textarea{width:100%;border:1px solid var(--border-light);border-radius:12px;background:var(--surface);color:var(--text);outline:none;font-family:'Inter',sans-serif;font-size:15px;padding:14px}
.ticket-form-row{display:flex;gap:12px;width:100%;align-items:stretch}
.ticket-form-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.ticket-form-main{display:flex;gap:12px;align-items:stretch;flex:1 1 auto;width:100%}
.ticket-form-stacked{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px}
#reasonSlide{flex:1 1 auto}
#reasonSlide textarea{height:100%}
#createTicketForm .ticket-form{flex:1 1 auto}

/* --- колонка кнопок: «Создать тикет» + «Прикрепить файл» --- */
/* ширина 56px; класс .no-sel (категория не выбрана) схлопывает колонку по
   ширине И высоте — иначе текст пилюли, сжатый в нулевую ширину, распирает
   строку формы; .at-title (выбран «Свой заголовок») снимает верхний отступ,
   чтобы пилюля примыкала к полю названия */
#ticketFormActions{display:flex!important;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;width:56px;margin-top:10px;flex-shrink:0;overflow:hidden;transition:width .4s cubic-bezier(.22,1,.36,1)}
#ticketFormActions.no-sel{width:0!important;height:0!important;min-height:0!important;gap:0;pointer-events:none}
#ticketFormActions.at-title{margin-top:0}
.tfa-extra{display:flex;flex-direction:column;gap:10px;flex:1 0 auto;width:100%}

/* кнопка создания: белая пилюля; на ≤480px текст скрывается — остаётся
   иконка-самолётик (та же, что у кнопки отправки в чате тикета) */
#ticketFormActions .ticket-create-btn{width:100%;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px;border:1px solid var(--text);border-radius:26px;font-size:11px;font-weight:700;line-height:1.2;cursor:pointer;transition:.2s;flex:1 0 auto;background:var(--text)!important;border-color:var(--text)!important;color:var(--bg)!important}
#ticketFormActions .ticket-create-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.5;fill:none}
#ticketFormActions .ticket-create-btn:hover{opacity:.7!important;box-shadow:none!important;transform:none!important}
#ticketFormActions .ticket-create-btn:active{opacity:1!important}
#ticketFormActions .ticket-create-btn:disabled{opacity:.5!important;cursor:not-allowed!important}
#ticketFormActions .ticket-create-btn.creating svg{display:none}
#ticketFormActions .ticket-create-btn.creating::after{content:'';width:18px;height:18px;border:2px solid var(--bg);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@media(max-width:480px){
#ticketFormActions .ticket-create-btn span{display:none}
#ticketFormActions .ticket-create-btn svg{width:20px;height:20px}
}

/* кнопка прикрепления файлов (стилем гасится красный hover .photo-btn-label) */
#ticketFormActions .ticket-attach-btn{width:52px!important;height:52px!important;max-height:none!important;min-height:0!important;padding:0!important;border-radius:24px!important;background:var(--surface)!important;border:1px solid var(--border-light)!important;color:var(--text-muted)!important;display:flex!important;align-items:center!important;justify-content:center!important;aspect-ratio:auto!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;flex:0 0 auto;align-self:center;cursor:pointer;transition:.2s}
#ticketFormActions .ticket-attach-btn:hover{background:var(--surface-hover)!important;border-color:var(--border-heavy)!important;color:var(--text)!important;opacity:.85}
#ticketFormActions .ticket-attach-btn:active{opacity:.65;transform:scale(.95)}
#ticketFormActions .ticket-attach-btn svg{width:18px;height:18px;margin-top:0;stroke:currentColor}

/* --- модалка поверх всего --- */
.ticket-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.15);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:all .3s ease}
[data-theme="light"] .ticket-modal-overlay{background:rgba(245,245,245,.15)}
.ticket-modal-overlay.active{opacity:1;visibility:visible}
/* аврора-подсветка фона — 1:1 как у карточек профиля (15-profile.css):
   фиолетовое свечение в правом верхнем углу, розовое в левом нижнем,
   световая нить по верхней кромке */
.ticket-modal{--aur-1:rgba(138,120,255,.11);--aur-2:rgba(255,110,180,.06);background:radial-gradient(120% 90% at 88% -18%,var(--aur-1),transparent 60%),radial-gradient(100% 80% at -8% 112%,var(--aur-2),transparent 62%),rgba(0,0,0,.45);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--border-heavy);border-radius:28px;padding:28px;width:100%;max-width:550px;position:relative;transform:translateY(20px) scale(.95);transition:all .18s cubic-bezier(.175,.885,.32,1.275);max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
[data-theme="light"] .ticket-modal{--aur-1:rgba(110,95,230,.10);--aur-2:rgba(220,80,160,.06);background:radial-gradient(120% 90% at 88% -18%,var(--aur-1),transparent 60%),radial-gradient(100% 80% at -8% 112%,var(--aur-2),transparent 62%),rgba(255,255,255,.15)}
.ticket-modal::after{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);pointer-events:none}
[data-theme="light"] .ticket-modal::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.ticket-modal-overlay.active .ticket-modal{transform:translateY(0) scale(1);animation:glassBlurIn .18s ease-out both}

/* сброс общих стилей .card внутри модалки */
#createTicketForm .card{padding:0;margin:0;background:transparent;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;animation:none;contain:none;max-height:none;overflow:visible}
#createTicketForm .card h3{font-size:20px;text-transform:none;letter-spacing:0;color:var(--text);margin-bottom:0}
/* иконка тикета слева от заголовка — та же, что в нижнем меню */
.ticket-title-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ticket-title-ic{width:24px;height:24px;flex-shrink:0;color:var(--text)}
@media (max-width:768px){.ticket-modal{padding:20px 16px;border-radius:20px}}
#createTicketForm textarea{resize:none}

/* --- превью выбранных файлов --- */
#createFilePreview:empty{display:none;margin:0}
#createFilePreview{width:100%;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.create-file-tag{background:var(--surface);border:1px solid var(--border-light);padding:8px 12px;border-radius:8px;font-size:12px;display:flex;align-items:center;gap:8px;color:var(--text-secondary)}
.create-file-tag button{background:var(--danger);color:#fff;border:none;border-radius:50%;width:16px;height:16px;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center}