+
+
+
+
+
+
+
+
diff --git a/frontend/src/lib/admin/stores/supportStore.js b/frontend/src/lib/admin/stores/supportStore.js
new file mode 100644
index 0000000..f1925ea
--- /dev/null
+++ b/frontend/src/lib/admin/stores/supportStore.js
@@ -0,0 +1,216 @@
+import { writable } from "svelte/store";
+
+export function createAdminSupportStore({ api, onToast, at }) {
+ const state = writable({
+ tickets: [],
+ stats: { active: 0, closed: 0, open: 0, awaiting_admin: 0, total_unread_admin: 0 },
+ filters: {
+ status: "active",
+ priority: "",
+ category: "",
+ search: "",
+ sort: "importance_desc",
+ },
+ loading: false,
+ openedTicketId: null,
+ openedTicket: null,
+ messages: [],
+ userSnapshot: null,
+ detailLoading: false,
+ sending: false,
+ composerInternalNote: false,
+ });
+
+ let pollTimer = null;
+ let active = "stats";
+
+ function setActive(section) {
+ active = section;
+ }
+
+ function pushTicketPath(ticketId) {
+ if (typeof window === "undefined" || window.location.protocol === "file:") return;
+ if (active !== "support") return;
+ const target = ticketId ? `/admin/support/${ticketId}` : "/admin/support";
+ if (window.location.pathname !== target) {
+ window.history.pushState(
+ null,
+ "",
+ `${target}${window.location.search}${window.location.hash}`
+ );
+ }
+ }
+
+ async function loadStats() {
+ const res = await api("/admin/support/stats");
+ if (res?.ok) state.update((s) => ({ ...s, stats: res.stats || s.stats }));
+ }
+
+ async function loadList() {
+ state.update((s) => ({ ...s, loading: true }));
+ let filters;
+ state.update((s) => {
+ filters = s.filters;
+ return s;
+ });
+ try {
+ const params = new URLSearchParams({ limit: "50", offset: "0" });
+ for (const [key, value] of Object.entries(filters || {})) {
+ if (value) params.set(key, value);
+ }
+ const res = await api(`/admin/support/tickets?${params.toString()}`);
+ if (res?.ok) state.update((s) => ({ ...s, tickets: res.tickets || [] }));
+ else if (res?.error) onToast(res.message || res.error);
+ } finally {
+ state.update((s) => ({ ...s, loading: false }));
+ }
+ }
+
+ async function openTicket(ticketId, opts = {}) {
+ const id = Number(ticketId);
+ if (!id) return;
+ state.update((s) => ({
+ ...s,
+ openedTicketId: id,
+ openedTicket: s.openedTicket?.ticket_id === id ? s.openedTicket : null,
+ messages: s.openedTicket?.ticket_id === id ? s.messages : [],
+ userSnapshot: s.openedTicket?.ticket_id === id ? s.userSnapshot : null,
+ detailLoading: true,
+ }));
+ if (!opts.skipPush) pushTicketPath(id);
+ try {
+ const res = await api(`/admin/support/tickets/${id}`);
+ if (res?.ok) {
+ state.update((s) => ({
+ ...s,
+ openedTicket: res.ticket,
+ messages: res.messages || [],
+ userSnapshot: res.user_snapshot || null,
+ }));
+ await api(`/admin/support/tickets/${id}/read`, { method: "POST", body: "{}" });
+ await loadStats();
+ } else onToast(res?.message || res?.error || "not_found");
+ } finally {
+ state.update((s) => ({ ...s, detailLoading: false }));
+ }
+ }
+
+ function closeTicketView(opts = {}) {
+ state.update((s) => ({
+ ...s,
+ openedTicketId: null,
+ openedTicket: null,
+ messages: [],
+ userSnapshot: null,
+ }));
+ if (!opts.skipPush) pushTicketPath(null);
+ }
+
+ async function sendReply(body) {
+ let current;
+ let internal;
+ state.update((s) => {
+ current = s.openedTicketId;
+ internal = s.composerInternalNote;
+ return { ...s, sending: true };
+ });
+ if (!current) return;
+ try {
+ const res = await api(`/admin/support/tickets/${current}/messages`, {
+ method: "POST",
+ body: JSON.stringify({ body, is_internal_note: internal }),
+ });
+ if (!res?.ok) throw res;
+ state.update((s) => ({
+ ...s,
+ openedTicket: res.ticket
+ ? { ...s.openedTicket, ...res.ticket, user: res.ticket.user || s.openedTicket?.user }
+ : s.openedTicket,
+ messages: [...s.messages, res.message],
+ }));
+ await loadList();
+ await loadStats();
+ } catch (error) {
+ onToast(error?.message || at("support_send_failed", {}, "Send failed"));
+ } finally {
+ state.update((s) => ({ ...s, sending: false }));
+ }
+ }
+
+ async function patchTicket(updates) {
+ let current;
+ state.update((s) => {
+ current = s.openedTicketId;
+ return s;
+ });
+ if (!current) return;
+ const res = await api(`/admin/support/tickets/${current}`, {
+ method: "PATCH",
+ body: JSON.stringify(updates),
+ });
+ if (res?.ok) {
+ state.update((s) => ({
+ ...s,
+ openedTicket: res.ticket
+ ? { ...s.openedTicket, ...res.ticket, user: res.ticket.user || s.openedTicket?.user }
+ : s.openedTicket,
+ }));
+ await loadList();
+ await loadStats();
+ } else onToast(res?.message || res?.error || "update_failed");
+ }
+
+ function closeTicket() {
+ patchTicket({ status: "closed" });
+ }
+
+ function toggleInternalNote() {
+ state.update((s) => ({ ...s, composerInternalNote: !s.composerInternalNote }));
+ }
+
+ function setFilter(key, value) {
+ state.update((s) => ({ ...s, filters: { ...s.filters, [key]: value } }));
+ }
+
+ function setStatusView(status) {
+ state.update((s) => ({
+ ...s,
+ filters: {
+ ...s.filters,
+ status: status === "closed" ? "closed" : "active",
+ },
+ }));
+ loadList();
+ }
+
+ function startStatsPolling() {
+ if (pollTimer || typeof window === "undefined") return;
+ loadStats();
+ pollTimer = window.setInterval(() => {
+ if (document.visibilityState === "visible") loadStats();
+ }, 30000);
+ }
+
+ function stopStatsPolling() {
+ if (pollTimer) window.clearInterval(pollTimer);
+ pollTimer = null;
+ }
+
+ return {
+ subscribe: state.subscribe,
+ update: state.update,
+ setActive,
+ loadStats,
+ loadList,
+ openTicket,
+ closeTicketView,
+ sendReply,
+ patchTicket,
+ closeTicket,
+ toggleInternalNote,
+ setFilter,
+ setStatusView,
+ startStatsPolling,
+ stopStatsPolling,
+ };
+}
diff --git a/frontend/src/lib/admin/stores/themesStore.js b/frontend/src/lib/admin/stores/themesStore.js
index 25b7b41..6e8acfc 100644
--- a/frontend/src/lib/admin/stores/themesStore.js
+++ b/frontend/src/lib/admin/stores/themesStore.js
@@ -69,13 +69,7 @@ export function createThemesStore({ api, onThemesSaved, flash, at }) {
body,
});
if (data?.ok) {
- flash(
- at(
- "appearance_logo_uploaded_pending",
- {},
- "Логотип загружен и применен."
- )
- );
+ flash(at("appearance_logo_uploaded_pending", {}, "Логотип загружен и применен."));
return { logoUrl: data.logo_url || "", faviconUrl: data.favicon_url || "" };
}
flash(
@@ -99,13 +93,7 @@ export function createThemesStore({ api, onThemesSaved, flash, at }) {
body: JSON.stringify({ url: sourceUrl }),
});
if (data?.ok) {
- flash(
- at(
- "appearance_logo_uploaded_pending",
- {},
- "Логотип загружен и применен."
- )
- );
+ flash(at("appearance_logo_uploaded_pending", {}, "Логотип загружен и применен."));
return { logoUrl: data.logo_url || "", faviconUrl: data.favicon_url || "" };
}
flash(
@@ -130,13 +118,7 @@ export function createThemesStore({ api, onThemesSaved, flash, at }) {
body,
});
if (data?.ok) {
- flash(
- at(
- "appearance_favicon_uploaded_pending",
- {},
- "Favicon загружена и применена."
- )
- );
+ flash(at("appearance_favicon_uploaded_pending", {}, "Favicon загружена и применена."));
return { faviconUrl: data.favicon_url || "", variants: data.variants || {} };
}
flash(
@@ -160,13 +142,7 @@ export function createThemesStore({ api, onThemesSaved, flash, at }) {
body: JSON.stringify({ url: sourceUrl }),
});
if (data?.ok) {
- flash(
- at(
- "appearance_favicon_uploaded_pending",
- {},
- "Favicon загружена и применена."
- )
- );
+ flash(at("appearance_favicon_uploaded_pending", {}, "Favicon загружена и применена."));
return { faviconUrl: data.favicon_url || "", variants: data.variants || {} };
}
flash(
diff --git a/frontend/src/lib/components/patterns/admin/AdminRevenueChart.svelte b/frontend/src/lib/components/patterns/admin/AdminRevenueChart.svelte
index 1f50900..d2d71d7 100644
--- a/frontend/src/lib/components/patterns/admin/AdminRevenueChart.svelte
+++ b/frontend/src/lib/components/patterns/admin/AdminRevenueChart.svelte
@@ -68,7 +68,7 @@
const accent = readCssColor("--accent", "#00fe7a");
const lineStroke = readCssColor(
"--admin-chart-stroke",
- readCssColor("--admin-text", "#e8f0ec"),
+ readCssColor("--admin-text", "#e8f0ec")
);
const lineFill = readCssColor("--admin-chart-fill", "rgba(120, 140, 132, 0.14)");
diff --git a/frontend/src/lib/components/patterns/admin/SupportComposer.svelte b/frontend/src/lib/components/patterns/admin/SupportComposer.svelte
new file mode 100644
index 0000000..dab1191
--- /dev/null
+++ b/frontend/src/lib/components/patterns/admin/SupportComposer.svelte
@@ -0,0 +1,50 @@
+
+
+
+
+ {stats?.open || 0}
+ {at("support_status_open", {}, "Открыт")}
+
+
+ {stats?.awaiting_admin || 0}
+ {at("support_status_awaiting_admin", {}, "Ждет админа")}
+
+
+ {stats?.total_unread_admin || 0}
+ {at("support_unread", {}, "Непрочитано")}
+
+
+
+
+ {#each statusTabs as tab (tab.value)}
+
+ {/each}
+
+
+
+
+ {#if loading}
+
+ {#each Array(6) as _, index (index)}
+
+
+ {/each}
+
+ {:else if !tickets.length}
+ {at("support_empty", {}, "Тикетов пока нет")}
+ {:else}
+
+ {#each tickets as ticket}
+ supportStore.openTicket(item.ticket_id)}
+ />
+ {/each}
+
+ {/if}
+
+
+
+
diff --git a/frontend/src/lib/components/patterns/admin/SupportInboxRow.svelte b/frontend/src/lib/components/patterns/admin/SupportInboxRow.svelte
new file mode 100644
index 0000000..cf044be
--- /dev/null
+++ b/frontend/src/lib/components/patterns/admin/SupportInboxRow.svelte
@@ -0,0 +1,84 @@
+
+
+
diff --git a/frontend/src/lib/components/patterns/admin/SupportTicketHeader.svelte b/frontend/src/lib/components/patterns/admin/SupportTicketHeader.svelte
new file mode 100644
index 0000000..347a9cc
--- /dev/null
+++ b/frontend/src/lib/components/patterns/admin/SupportTicketHeader.svelte
@@ -0,0 +1,79 @@
+
+
+{#if ticket}
+
+
+ {#if sending}
+
+
+
+
+
+
+
+
+
+
+
+{/if}
diff --git a/frontend/src/lib/components/patterns/admin/SupportUserContextPanel.svelte b/frontend/src/lib/components/patterns/admin/SupportUserContextPanel.svelte
new file mode 100644
index 0000000..43927d2
--- /dev/null
+++ b/frontend/src/lib/components/patterns/admin/SupportUserContextPanel.svelte
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+
+
+ patch("status", value)}
+ />
+ patch("priority", value)}
+ />
+ patch("category", value)}
+ />
+
+
+
+
+
+
+ {displayName}
+ {identityMeta}
+ {#if user.is_banned}
+ {at("status_banned", {}, "Бан")}
+ {/if}
+
+
+ {#each contextItems as item (item.label)}
+
+ {item.label}
+ {item.value}
+
+ {/each}
+
+
+
+ (window.location.href = `/admin/users/${user.user_id}`)}
+ aria-label={at("support_open_user", {}, "Карточка")}
+ title={at("support_open_user", {}, "Карточка")}
+ >
+
+
+
+
+
diff --git a/frontend/src/lib/components/patterns/webapp/TicketMessageBubble.svelte b/frontend/src/lib/components/patterns/webapp/TicketMessageBubble.svelte
new file mode 100644
index 0000000..0781f44
--- /dev/null
+++ b/frontend/src/lib/components/patterns/webapp/TicketMessageBubble.svelte
@@ -0,0 +1,79 @@
+
+
+
+ {value.length}/{maxLength}
+
+
+
+
+
+
+
+
+ {body}
+
+
diff --git a/frontend/src/lib/components/ui/textarea.svelte b/frontend/src/lib/components/ui/textarea.svelte
new file mode 100644
index 0000000..18a12fd
--- /dev/null
+++ b/frontend/src/lib/components/ui/textarea.svelte
@@ -0,0 +1,23 @@
+
+
+
diff --git a/frontend/src/lib/webapp/constants.js b/frontend/src/lib/webapp/constants.js
index 70664b6..f85a061 100644
--- a/frontend/src/lib/webapp/constants.js
+++ b/frontend/src/lib/webapp/constants.js
@@ -22,6 +22,7 @@ export const APP_SECTION_PATHS = {
home: "/home",
invite: "/invite",
devices: "/devices",
+ support: "/support",
settings: "/settings",
admin: "/admin",
};
@@ -33,6 +34,7 @@ export const ADMIN_SECTIONS = new Set([
"ads",
"broadcast",
"logs",
+ "support",
"tariffs",
"appearance",
"settings",
diff --git a/frontend/src/lib/webapp/i18n.js b/frontend/src/lib/webapp/i18n.js
index 685c9a6..192b74d 100644
--- a/frontend/src/lib/webapp/i18n.js
+++ b/frontend/src/lib/webapp/i18n.js
@@ -2,7 +2,24 @@ import { LANGUAGE_LABELS } from "./constants.js";
import { formatTemplate, formatFraction, roundToHalf } from "./formatters.js";
import { unitPluralBucket } from "./plurals.js";
-export function createI18n({ messages = {}, defaultLang = "ru", getLang = null } = {}) {
+export function createI18n({
+ messages: initialMessages = {},
+ defaultLang = "ru",
+ getLang = null,
+} = {}) {
+ const messages = {};
+
+ function mergeMessages(nextMessages = {}) {
+ if (!nextMessages || typeof nextMessages !== "object") return messages;
+ for (const [lang, bucket] of Object.entries(nextMessages)) {
+ if (!bucket || typeof bucket !== "object") continue;
+ messages[lang] = { ...(messages[lang] || {}), ...bucket };
+ }
+ return messages;
+ }
+
+ mergeMessages(initialMessages);
+
function normalizeLangCode(lang) {
const key = String(lang || "")
.trim()
@@ -45,7 +62,7 @@ export function createI18n({ messages = {}, defaultLang = "ru", getLang = null }
return t(`wa_sub_term_${unit}_${bucket}`);
}
- return { normalizeLangCode, t, currentLang, languageName, termUnitLabel };
+ return { normalizeLangCode, t, currentLang, languageName, termUnitLabel, mergeMessages };
}
export { formatFraction, roundToHalf };
diff --git a/frontend/src/lib/webapp/mockApi.js b/frontend/src/lib/webapp/mockApi.js
index 4e4e513..21d575d 100644
--- a/frontend/src/lib/webapp/mockApi.js
+++ b/frontend/src/lib/webapp/mockApi.js
@@ -66,6 +66,150 @@ export async function mockApi(path, options = {}, context = {}) {
premium_traffic: { state: "none" },
},
];
+ const supportTickets = [
+ {
+ ticket_id: 42,
+ user_id: 100200300,
+ subject: "Не подключается профиль на телефоне",
+ category: "technical",
+ priority: "high",
+ status: "awaiting_admin",
+ unread_user_count: 0,
+ unread_admin_count: 2,
+ last_message_at: new Date(Date.now() - 18 * 60000).toISOString(),
+ created_at: new Date(Date.now() - 2 * 3600000).toISOString(),
+ user: adminUsers[0],
+ },
+ {
+ ticket_id: 43,
+ user_id: 100200300,
+ subject: "Вопрос по оплате подписки",
+ category: "billing",
+ priority: "normal",
+ status: "awaiting_user",
+ unread_user_count: 1,
+ unread_admin_count: 0,
+ last_message_at: new Date(Date.now() - 4 * 3600000).toISOString(),
+ created_at: new Date(Date.now() - 6 * 3600000).toISOString(),
+ user: adminUsers[0],
+ },
+ {
+ ticket_id: 41,
+ user_id: 100200300,
+ subject: "Закрытый вопрос по старому профилю",
+ category: "technical",
+ priority: "low",
+ status: "closed",
+ unread_user_count: 0,
+ unread_admin_count: 0,
+ last_message_at: new Date(Date.now() - 4 * 86400000).toISOString(),
+ created_at: new Date(Date.now() - 6 * 86400000).toISOString(),
+ closed_at: new Date(Date.now() - 4 * 86400000).toISOString(),
+ user: adminUsers[0],
+ },
+ ];
+ function supportCounts(items = supportTickets) {
+ const byStatus = { open: 0, awaiting_admin: 0, awaiting_user: 0, resolved: 0 };
+ for (const item of items) {
+ byStatus[item.status] = (byStatus[item.status] || 0) + 1;
+ }
+ const closed = (byStatus.closed || 0) + (byStatus.resolved || 0);
+ const active = items.length - closed;
+ return { ...byStatus, active, closed, total: items.length };
+ }
+ function filterSupportTickets(items, params) {
+ let out = [...items];
+ const status = params.get("status");
+ if (status === "active")
+ out = out.filter((item) => !["closed", "resolved"].includes(item.status));
+ else if (status === "closed")
+ out = out.filter((item) => ["closed", "resolved"].includes(item.status));
+ else if (status) out = out.filter((item) => item.status === status);
+ const priority = params.get("priority");
+ if (priority) out = out.filter((item) => item.priority === priority);
+ const category = params.get("category");
+ if (category) out = out.filter((item) => item.category === category);
+ const search = (params.get("search") || "").trim().toLowerCase();
+ if (search) {
+ out = out.filter((item) =>
+ [item.subject, item.user?.username, item.user?.email, String(item.ticket_id)]
+ .filter(Boolean)
+ .some((value) => String(value).toLowerCase().includes(search))
+ );
+ }
+ const sort = params.get("sort") || "updated_desc";
+ const priorityRank = { urgent: 4, high: 3, normal: 2, low: 1 };
+ out.sort((a, b) => {
+ if (sort === "importance_desc") {
+ return (
+ (priorityRank[b.priority] || 0) - (priorityRank[a.priority] || 0) ||
+ new Date(b.last_message_at || b.created_at) - new Date(a.last_message_at || a.created_at)
+ );
+ }
+ if (sort === "updated_asc") {
+ return (
+ new Date(a.last_message_at || a.created_at) - new Date(b.last_message_at || b.created_at)
+ );
+ }
+ if (sort === "created_desc") return new Date(b.created_at) - new Date(a.created_at);
+ if (sort === "created_asc") return new Date(a.created_at) - new Date(b.created_at);
+ return (
+ new Date(b.last_message_at || b.created_at) - new Date(a.last_message_at || a.created_at)
+ );
+ });
+ return out;
+ }
+ const supportMessages = {
+ 42: [
+ {
+ message_id: 1,
+ ticket_id: 42,
+ author_role: "user",
+ author_user_id: 100200300,
+ author_name: "Анна Смирнова",
+ body: "После обновления приложения профиль перестал подключаться. Ошибка появляется сразу после импорта ссылки.",
+ created_at: new Date(Date.now() - 2 * 3600000).toISOString(),
+ },
+ {
+ message_id: 2,
+ ticket_id: 42,
+ author_role: "admin",
+ author_user_id: 1,
+ author_name: "Мария, поддержка",
+ body: "Проверили подписку, она активна. Попробуйте удалить старый профиль и импортировать ссылку ещё раз.",
+ created_at: new Date(Date.now() - 90 * 60000).toISOString(),
+ },
+ {
+ message_id: 3,
+ ticket_id: 42,
+ author_role: "user",
+ author_user_id: 100200300,
+ author_name: "Анна Смирнова",
+ body: "Сделал так, но теперь вижу timeout. Телефон iPhone, сеть домашний Wi‑Fi.",
+ created_at: new Date(Date.now() - 18 * 60000).toISOString(),
+ },
+ ],
+ 43: [
+ {
+ message_id: 4,
+ ticket_id: 43,
+ author_role: "user",
+ author_user_id: 100200300,
+ author_name: "Анна Смирнова",
+ body: "Оплата прошла, но срок подписки не изменился.",
+ created_at: new Date(Date.now() - 6 * 3600000).toISOString(),
+ },
+ {
+ message_id: 5,
+ ticket_id: 43,
+ author_role: "admin",
+ author_user_id: 2,
+ author_name: "Иван, поддержка",
+ body: "Платёж нашли и применили вручную. Проверьте, пожалуйста, дату окончания подписки.",
+ created_at: new Date(Date.now() - 4 * 3600000).toISOString(),
+ },
+ ],
+ };
const mockAdminDailySeries = (() => {
const days = 730;
const out = [];
@@ -331,8 +475,134 @@ export async function mockApi(path, options = {}, context = {}) {
},
],
};
+ if (cleanPath === "/admin/support/stats") {
+ return {
+ ok: true,
+ stats: { ...supportCounts(), total_unread_admin: 2 },
+ };
+ }
+ if (cleanPath === "/admin/support/tickets") {
+ const params = new URLSearchParams(String(path || "").split("?")[1] || "");
+ const tickets = filterSupportTickets(supportTickets, params);
+ return { ok: true, tickets: clone(tickets), total: tickets.length };
+ }
+ if (cleanPath.startsWith("/admin/support/tickets/")) {
+ const parts = cleanPath.split("/");
+ const ticketId = Number(parts[4]);
+ const ticket = clone(
+ supportTickets.find((item) => item.ticket_id === ticketId) || supportTickets[0]
+ );
+ if (parts[5] === "messages") {
+ return {
+ ok: true,
+ ticket,
+ message: {
+ message_id: Date.now(),
+ ticket_id: ticket.ticket_id,
+ author_role: "admin",
+ author_user_id: 1,
+ author_name: "Мария, поддержка",
+ body: JSON.parse(options?.body || "{}")?.body || "",
+ is_internal_note: Boolean(JSON.parse(options?.body || "{}")?.is_internal_note),
+ created_at: new Date().toISOString(),
+ },
+ };
+ }
+ if (String(options.method || "GET").toUpperCase() === "PATCH") {
+ return { ok: true, ticket: { ...ticket, ...(JSON.parse(options?.body || "{}") || {}) } };
+ }
+ return {
+ ok: true,
+ ticket,
+ messages: clone([
+ ...(supportMessages[ticket.ticket_id] || []),
+ {
+ message_id: 99,
+ ticket_id: ticket.ticket_id,
+ author_role: "admin",
+ author_user_id: 1,
+ author_name: "Мария, поддержка",
+ body: "Внутренняя заметка для команды: проверить последние логи панели перед ответом.",
+ is_internal_note: true,
+ created_at: new Date(Date.now() - 12 * 60000).toISOString(),
+ },
+ ]),
+ user_snapshot: {
+ user_id: ticket.user_id,
+ name: "Анна Смирнова",
+ username: "anna_ops",
+ email: "anna@example.com",
+ tariff: "Standard",
+ panel_status: "ACTIVE",
+ remaining: "20 д. 4 ч.",
+ regular_traffic: "12 GB / 500 GB",
+ premium_traffic: "4 GB / 25 GB",
+ },
+ };
+ }
if (cleanPath.startsWith("/admin/"))
return { ok: true, payments: [], promos: [], logs: [], campaigns: [], total: 0 };
+ if (
+ cleanPath === "/support/tickets" &&
+ String(options.method || "GET").toUpperCase() === "POST"
+ ) {
+ let payload = {};
+ try {
+ payload = JSON.parse(options?.body || "{}");
+ } catch (_error) {
+ void _error;
+ }
+ return {
+ ok: true,
+ ticket: {
+ ticket_id: 44,
+ user_id: 100200300,
+ subject: payload.subject || "Новое обращение",
+ category: payload.category || "other",
+ priority: payload.priority || "normal",
+ status: "awaiting_admin",
+ unread_user_count: 0,
+ unread_admin_count: 1,
+ last_message_at: new Date().toISOString(),
+ created_at: new Date().toISOString(),
+ },
+ };
+ }
+ if (cleanPath === "/support/tickets") {
+ const params = new URLSearchParams(String(path || "").split("?")[1] || "");
+ const tickets = filterSupportTickets(supportTickets, params);
+ return {
+ ok: true,
+ tickets: clone(tickets),
+ total: tickets.length,
+ counts: supportCounts(),
+ };
+ }
+ if (cleanPath.startsWith("/support/tickets/")) {
+ const parts = cleanPath.split("/");
+ const ticketId = Number(parts[3]);
+ const ticket = clone(
+ supportTickets.find((item) => item.ticket_id === ticketId) || supportTickets[0]
+ );
+ if (parts[4] === "read") return { ok: true };
+ if (parts[4] === "messages") {
+ return {
+ ok: true,
+ ticket,
+ message: {
+ message_id: Date.now(),
+ ticket_id: ticket.ticket_id,
+ author_role: "user",
+ author_user_id: 100200300,
+ author_name: "Анна Смирнова",
+ body: JSON.parse(options?.body || "{}")?.body || "",
+ created_at: new Date().toISOString(),
+ },
+ };
+ }
+ return { ok: true, ticket, messages: clone(supportMessages[ticket.ticket_id] || []) };
+ }
+ if (cleanPath === "/support/unread") return { ok: true, unread: 1 };
if (path === "/me") return clone(DEV_MOCK.data);
if (path === "/auth/email/request") return { ok: true };
if (path === "/auth/email/verify" || path === "/auth/email/magic") {
diff --git a/frontend/src/lib/webapp/routes.js b/frontend/src/lib/webapp/routes.js
index df1299a..ed0647b 100644
--- a/frontend/src/lib/webapp/routes.js
+++ b/frontend/src/lib/webapp/routes.js
@@ -7,6 +7,7 @@ export function normalizeSection(value) {
if (
section === "invite" ||
section === "devices" ||
+ section === "support" ||
section === "settings" ||
section === "admin"
) {
@@ -22,6 +23,7 @@ export function sectionFromPath(pathname) {
.replace(/\/+$/, "");
if (!normalizedPath || normalizedPath === "/") return "home";
if (normalizedPath === "/admin" || normalizedPath.startsWith("/admin/")) return "admin";
+ if (normalizedPath === "/support" || normalizedPath.startsWith("/support/")) return "support";
const section = normalizedPath.startsWith("/") ? normalizedPath.slice(1) : normalizedPath;
return normalizeSection(section);
}
@@ -43,6 +45,22 @@ export function adminUserIdFromPath(pathname) {
return m ? Number(m[1]) : null;
}
+export function supportTicketIdFromPath(pathname) {
+ const normalized = String(pathname || "")
+ .toLowerCase()
+ .replace(/\/+$/, "");
+ const m = normalized.match(/^\/support\/(\d+)$/);
+ return m ? Number(m[1]) : null;
+}
+
+export function adminSupportTicketIdFromPath(pathname) {
+ const normalized = String(pathname || "")
+ .toLowerCase()
+ .replace(/\/+$/, "");
+ const m = normalized.match(/^\/admin\/support\/(\d+)$/);
+ return m ? Number(m[1]) : null;
+}
+
export function syncSectionPath(section, replace = false, adminSection = null, adminUserId = null) {
if (window.location.protocol === "file:") return;
const normalized = normalizeSection(section);
@@ -51,7 +69,11 @@ export function syncSectionPath(section, replace = false, adminSection = null, a
const adm = adminSection || adminSectionFromPath(window.location.pathname) || "stats";
const uid =
adminUserId ?? (adm === "users" ? adminUserIdFromPath(window.location.pathname) : null);
- targetPath = adm === "users" && uid ? `/admin/users/${uid}` : `/admin/${adm}`;
+ const supportTicketId =
+ adm === "support" ? adminSupportTicketIdFromPath(window.location.pathname) : null;
+ if (adm === "users" && uid) targetPath = `/admin/users/${uid}`;
+ else if (adm === "support" && supportTicketId) targetPath = `/admin/support/${supportTicketId}`;
+ else targetPath = `/admin/${adm}`;
}
if (window.location.pathname === targetPath) return;
const nextUrl = `${targetPath}${window.location.search}${window.location.hash}`;
diff --git a/frontend/src/lib/webapp/stores/supportStore.js b/frontend/src/lib/webapp/stores/supportStore.js
new file mode 100644
index 0000000..ee6cd19
--- /dev/null
+++ b/frontend/src/lib/webapp/stores/supportStore.js
@@ -0,0 +1,287 @@
+import { writable } from "svelte/store";
+
+export function createSupportStore({ api, t, showToast }) {
+ const state = writable({
+ tickets: [],
+ openedTicketId: null,
+ openedTicket: null,
+ messages: [],
+ unreadCount: 0,
+ unreadLoaded: false,
+ unreadLoading: false,
+ counts: { active: 0, closed: 0, awaiting_admin: 0, awaiting_user: 0, open: 0, total: 0 },
+ loading: false,
+ detailLoading: false,
+ sending: false,
+ creating: false,
+ statusFilter: "active",
+ polling: false,
+ });
+
+ let pollTimer = null;
+ let pollIncludeList = false;
+ let listRequestSeq = 0;
+ let listPromise = null;
+ let listPromiseKey = "";
+ let unreadPromise = null;
+
+ function hydrateUnread(value) {
+ const next = Math.max(0, Number(value || 0));
+ state.update((s) => ({
+ ...s,
+ unreadCount: next,
+ unreadLoaded: true,
+ unreadLoading: false,
+ }));
+ }
+
+ async function loadList(options = {}) {
+ let filter = "all";
+ let hasTickets = false;
+ state.update((s) => {
+ filter = s.statusFilter;
+ hasTickets = Boolean(s.tickets?.length);
+ return s;
+ });
+ const requestKey = filter || "all";
+ if (!options.force && listPromise && listPromiseKey === requestKey) return listPromise;
+
+ const requestId = ++listRequestSeq;
+ const showLoading = !options.silent && (options.showLoading || !hasTickets);
+ if (showLoading) state.update((s) => ({ ...s, loading: true }));
+
+ let promise;
+ promise = (async () => {
+ try {
+ const params = new URLSearchParams({ limit: "50", offset: "0" });
+ if (filter && filter !== "all") params.set("status", filter);
+ const res = await api(`/support/tickets?${params.toString()}`);
+ if (requestId !== listRequestSeq) return res;
+ if (res?.ok)
+ state.update((s) => ({
+ ...s,
+ tickets: res.tickets || [],
+ counts: res.counts || s.counts,
+ }));
+ else if (res?.error) showToast(res.message || res.error);
+ return res;
+ } finally {
+ if (requestId === listRequestSeq) {
+ state.update((s) => (s.loading ? { ...s, loading: false } : s));
+ }
+ if (listPromise === promise) {
+ listPromise = null;
+ listPromiseKey = "";
+ }
+ }
+ })();
+
+ listPromise = promise;
+ listPromiseKey = requestKey;
+ return promise;
+ }
+
+ async function refreshCurrentTicket(ticketId) {
+ const id = Number(ticketId);
+ if (!id) return;
+ try {
+ const res = await api(`/support/tickets/${id}`);
+ if (res?.ok) {
+ state.update((s) => ({
+ ...s,
+ openedTicket: res.ticket,
+ messages: res.messages || [],
+ }));
+ await markRead(id);
+ }
+ return res;
+ } catch {
+ return null;
+ }
+ }
+
+ async function createTicket(payload) {
+ state.update((s) => ({ ...s, creating: true }));
+ try {
+ const res = await api("/support/tickets", {
+ method: "POST",
+ body: JSON.stringify(payload),
+ });
+ if (!res?.ok) throw res;
+ state.update((s) => ({ ...s, statusFilter: "active" }));
+ await loadList({ silent: true, force: true });
+ await openTicket(res.ticket.ticket_id);
+ return res.ticket;
+ } catch (error) {
+ showToast(error?.message || t("wa_support_create_failed"));
+ return null;
+ } finally {
+ state.update((s) => ({ ...s, creating: false }));
+ }
+ }
+
+ async function openTicket(ticketId, opts = {}) {
+ const id = Number(ticketId);
+ if (!id) return;
+ state.update((s) => ({
+ ...s,
+ openedTicketId: id,
+ openedTicket: s.openedTicket?.ticket_id === id ? s.openedTicket : null,
+ messages: s.openedTicket?.ticket_id === id ? s.messages : [],
+ detailLoading: true,
+ }));
+ if (!opts.skipPush && typeof window !== "undefined" && window.location.protocol !== "file:") {
+ const target = `/support/${id}`;
+ if (window.location.pathname !== target) {
+ window.history.pushState(
+ null,
+ "",
+ `${target}${window.location.search}${window.location.hash}`
+ );
+ }
+ }
+ try {
+ const res = await api(`/support/tickets/${id}`);
+ if (res?.ok) {
+ state.update((s) => ({
+ ...s,
+ openedTicket: res.ticket,
+ messages: res.messages || [],
+ }));
+ await markRead(id);
+ } else {
+ showToast(res?.message || res?.error || "not_found");
+ }
+ } finally {
+ state.update((s) => ({ ...s, detailLoading: false }));
+ }
+ }
+
+ function closeTicketView(opts = {}) {
+ state.update((s) => ({ ...s, openedTicketId: null, openedTicket: null, messages: [] }));
+ if (!opts.skipPush && typeof window !== "undefined" && window.location.protocol !== "file:") {
+ if (window.location.pathname.startsWith("/support/")) {
+ window.history.pushState(
+ null,
+ "",
+ `/support${window.location.search}${window.location.hash}`
+ );
+ }
+ }
+ }
+
+ async function sendReply(body) {
+ let ticketId = null;
+ state.update((s) => {
+ ticketId = s.openedTicketId;
+ return { ...s, sending: true };
+ });
+ if (!ticketId) return;
+ try {
+ const res = await api(`/support/tickets/${ticketId}/messages`, {
+ method: "POST",
+ body: JSON.stringify({ body }),
+ });
+ if (!res?.ok) throw res;
+ state.update((s) => ({
+ ...s,
+ openedTicket: res.ticket || s.openedTicket,
+ messages: [...s.messages, res.message],
+ }));
+ await refreshUnread();
+ await loadList({ silent: true, force: true });
+ } catch (error) {
+ showToast(error?.message || t("wa_support_send_failed"));
+ } finally {
+ state.update((s) => ({ ...s, sending: false }));
+ }
+ }
+
+ async function markRead(ticketId = null) {
+ const id =
+ ticketId ||
+ (() => {
+ let current = null;
+ state.update((s) => {
+ current = s.openedTicketId;
+ return s;
+ });
+ return current;
+ })();
+ if (!id) return;
+ await api(`/support/tickets/${id}/read`, { method: "POST", body: "{}" });
+ await refreshUnread();
+ }
+
+ async function refreshUnread() {
+ if (unreadPromise) return unreadPromise;
+ state.update((s) => ({ ...s, unreadLoading: true }));
+ unreadPromise = (async () => {
+ try {
+ const res = await api("/support/unread");
+ if (res?.ok) {
+ state.update((s) => ({
+ ...s,
+ unreadCount: Math.max(0, Number(res.unread || 0)),
+ unreadLoaded: true,
+ }));
+ }
+ return res;
+ } finally {
+ state.update((s) => ({ ...s, unreadLoading: false }));
+ unreadPromise = null;
+ }
+ })();
+ return unreadPromise;
+ }
+
+ function setStatusFilter(status) {
+ state.update((s) => ({ ...s, statusFilter: status || "all" }));
+ loadList({ force: true, showLoading: true });
+ }
+
+ function startPolling(options = {}) {
+ const includeList = options.includeList !== false;
+ pollIncludeList = pollIncludeList || includeList;
+ if (pollTimer || typeof window === "undefined") return;
+ state.update((s) => ({ ...s, polling: true }));
+ const tick = async () => {
+ if (document.visibilityState === "visible") {
+ await refreshUnread();
+ if (!pollIncludeList) return;
+ let opened = null;
+ state.update((s) => {
+ opened = s.openedTicketId;
+ return s;
+ });
+ if (opened) await refreshCurrentTicket(opened);
+ else await loadList({ silent: true });
+ }
+ };
+ pollTimer = window.setInterval(tick, 15000);
+ document.addEventListener("visibilitychange", tick);
+ }
+
+ function closePolling() {
+ if (pollTimer) window.clearInterval(pollTimer);
+ pollTimer = null;
+ pollIncludeList = false;
+ state.update((s) => ({ ...s, polling: false }));
+ }
+
+ return {
+ subscribe: state.subscribe,
+ update: state.update,
+ loadList,
+ hydrateUnread,
+ createTicket,
+ openTicket,
+ closeTicketView,
+ sendReply,
+ markRead,
+ refreshUnread,
+ setStatusFilter,
+ startPolling,
+ closePolling,
+ };
+}
diff --git a/frontend/src/main.js b/frontend/src/main.js
index e06f2b0..7472361 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,7 +6,7 @@ import "./styles.css";
async function loadBootstrap() {
if (document.getElementById("webapp-config")) return;
try {
- const response = await fetch("/api/bootstrap", {
+ const response = await fetch("/api/bootstrap?i18n_scope=webapp", {
credentials: "include",
headers: { Accept: "application/json" },
});
@@ -31,6 +31,7 @@ const target = document.getElementById("app");
if (target) {
loadBootstrap().finally(() => {
+ target.replaceChildren();
mount(App, { target });
});
}
diff --git a/frontend/src/styles/admin.css b/frontend/src/styles/admin.css
index 4872d94..d5e2952 100644
--- a/frontend/src/styles/admin.css
+++ b/frontend/src/styles/admin.css
@@ -32,13 +32,37 @@
height: 100%;
display: flex;
flex-direction: column;
- gap: 2px;
- padding: 28px 14px;
+ gap: 1px;
+ padding: 22px 14px;
border-right: 1px solid var(--admin-border);
background: var(--rail-bg);
backdrop-filter: blur(14px);
box-shadow: inset -1px 0 0 var(--admin-border);
overflow-y: auto;
+ overflow-x: hidden;
+ scrollbar-gutter: stable;
+ scrollbar-width: thin;
+ scrollbar-color: color-mix(in srgb, var(--admin-muted) 34%, var(--admin-border)) transparent;
+}
+
+.admin-sidebar::-webkit-scrollbar {
+ width: 8px;
+}
+
+.admin-sidebar::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.admin-sidebar::-webkit-scrollbar-thumb {
+ border: 2px solid transparent;
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--admin-muted) 34%, var(--admin-border));
+ background-clip: padding-box;
+}
+
+.admin-sidebar::-webkit-scrollbar-thumb:hover {
+ background: color-mix(in srgb, var(--admin-muted) 48%, var(--admin-border));
+ background-clip: padding-box;
}
.admin-sidebar > *:not(.admin-sidebar-footer) {
@@ -50,8 +74,8 @@
grid-template-columns: 38px minmax(0, 1fr) 34px;
align-items: center;
gap: 12px;
- padding: 4px 12px 18px;
- margin-bottom: 8px;
+ padding: 2px 10px 14px;
+ margin-bottom: 6px;
border-bottom: 1px solid var(--admin-border);
color: var(--admin-text);
}
@@ -89,7 +113,7 @@
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--admin-dim);
- padding: 14px 12px 6px;
+ padding: 10px 10px 5px;
}
.admin-nav {
@@ -102,8 +126,9 @@
display: grid;
grid-template-columns: 22px minmax(0, 1fr) auto;
align-items: center;
- gap: 12px;
- padding: 12px 14px;
+ gap: 10px;
+ min-height: 38px;
+ padding: 9px 12px;
border-radius: 10px;
border: 1px solid transparent;
background: transparent;
@@ -120,8 +145,34 @@
}
.admin-nav-item > svg {
- width: 20px;
- height: 20px;
+ width: 18px;
+ height: 18px;
+}
+
+.admin-nav-item > span:last-child {
+ display: flex;
+ min-width: 0;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.admin-nav-item .admin-badge.admin-badge-danger {
+ display: inline-grid;
+ box-sizing: border-box;
+ --numeric-badge-optical-y: 0.5px;
+ min-width: 22px;
+ height: 22px;
+ place-items: center;
+ border: 0;
+ background: var(--danger);
+ color: #fff;
+ font-size: 11px;
+ font-weight: 700;
+ line-height: 1;
+ padding: 0 7px;
+ text-align: center;
+ font-variant-numeric: lining-nums;
+ font-feature-settings: "lnum";
}
.admin-nav-item:hover {
@@ -142,7 +193,7 @@
.admin-sidebar-footer {
margin-top: auto;
- padding: 14px 0 0;
+ padding: 10px 0 0;
border-top: 1px solid var(--admin-border);
font-size: 11px;
color: var(--admin-dim);
@@ -321,6 +372,11 @@
width: 100%;
}
+.admin-section-stage:has(.support-admin-layout) {
+ flex: 1 1 auto;
+ min-height: 0;
+}
+
.admin-card {
border: 1px solid var(--admin-border);
background: var(--admin-card-bg);
@@ -2864,6 +2920,13 @@
box-shadow 0.12s ease;
}
+.admin-select-trigger span {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
.admin-select-trigger:hover {
border-color: var(--admin-border-strong);
}
@@ -3370,3 +3433,1678 @@
white-space: normal;
}
}
+.support-admin-layout {
+ display: grid;
+ grid-template-columns: minmax(300px, 360px) minmax(520px, 1fr) minmax(280px, 340px);
+ gap: 16px;
+ align-items: stretch;
+ min-height: min(820px, calc(100dvh - var(--admin-header-h) - 120px));
+}
+
+.support-admin-inbox,
+.support-admin-detail,
+.support-user-context {
+ display: grid;
+ gap: 12px;
+ min-width: 0;
+}
+
+.support-admin-inbox,
+.support-admin-detail {
+ min-height: 0;
+ align-self: stretch;
+}
+
+.support-admin-inbox {
+ grid-template-rows: auto minmax(0, 1fr);
+ border: 1px solid var(--admin-border);
+ border-radius: 14px;
+ background: color-mix(in srgb, var(--admin-surface) 88%, var(--admin-bg));
+ padding: 14px;
+}
+
+.support-admin-toolbar {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 10px;
+ align-items: stretch;
+}
+
+.support-admin-inbox .support-admin-toolbar {
+ padding: 0;
+ border: 0;
+ background: transparent;
+ box-shadow: none;
+}
+
+.support-admin-search {
+ position: relative;
+ display: block;
+ min-width: 0;
+}
+
+.support-admin-search svg {
+ position: absolute;
+ top: 50%;
+ left: 12px;
+ color: var(--admin-muted);
+ transform: translateY(-50%);
+ pointer-events: none;
+}
+
+.support-admin-search .input {
+ width: 100%;
+ padding-left: 36px;
+}
+
+.support-admin-filter-row {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 8px;
+ align-items: center;
+}
+
+.support-admin-filter-row > :last-child {
+ grid-column: 1 / -1;
+}
+
+.support-inbox-list {
+ gap: 8px;
+ min-height: 0;
+ overflow-y: auto;
+ padding-right: 2px;
+ scrollbar-width: thin;
+}
+
+.support-inbox-row {
+ position: relative;
+ width: 100%;
+ display: grid;
+ grid-template-columns: 36px minmax(0, 1fr) auto;
+ align-items: center;
+ gap: 12px;
+ text-align: left;
+ border: 1px solid var(--admin-border);
+ border-radius: 12px;
+ background: color-mix(in srgb, var(--admin-surface) 72%, var(--admin-bg));
+ color: inherit;
+ padding: 12px 12px 12px 14px;
+ cursor: pointer;
+ transition:
+ border-color 0.16s ease,
+ background 0.16s ease,
+ box-shadow 0.16s ease;
+}
+
+.support-inbox-row::before {
+ content: "";
+ position: absolute;
+ inset: 10px auto 10px 5px;
+ width: 3px;
+ border-radius: 3px;
+ background: var(--admin-border-strong);
+ transition: background 0.16s ease;
+}
+
+.support-inbox-row[data-status="open"]::before,
+.support-inbox-row[data-status="awaiting_admin"]::before {
+ background: var(--accent);
+}
+
+.support-inbox-row[data-status="awaiting_user"]::before {
+ background: var(--info);
+}
+
+.support-inbox-row[data-status="resolved"]::before,
+.support-inbox-row[data-status="closed"]::before {
+ background: color-mix(in srgb, var(--muted) 70%, transparent);
+}
+
+.support-inbox-row[data-priority="urgent"]::before {
+ background: var(--danger);
+}
+
+.support-inbox-row:hover {
+ border-color: color-mix(in srgb, var(--accent) 38%, var(--admin-border));
+ background: color-mix(in srgb, var(--admin-surface) 78%, var(--accent) 6%);
+}
+
+.support-inbox-row.active {
+ border-color: color-mix(in srgb, var(--accent) 60%, var(--admin-border));
+ background: color-mix(in srgb, var(--admin-surface) 82%, var(--accent) 10%);
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
+}
+
+.support-inbox-row-avatar {
+ display: grid;
+ width: 36px;
+ height: 36px;
+ place-items: center;
+ overflow: hidden;
+ border: 1px solid var(--admin-border);
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--admin-surface-2) 80%, transparent);
+ color: var(--admin-muted);
+ font-size: 12px;
+ font-weight: 800;
+ letter-spacing: 0.02em;
+}
+
+.support-inbox-row-avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.support-inbox-row-main {
+ display: grid;
+ gap: 4px;
+ min-width: 0;
+}
+
+.support-inbox-row-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ min-width: 0;
+}
+
+.support-inbox-row-title svg {
+ flex: 0 0 auto;
+ color: color-mix(in srgb, var(--accent) 72%, var(--admin-muted));
+}
+
+.support-inbox-row-title strong {
+ overflow: hidden;
+ font-size: 14px;
+ font-weight: 800;
+ letter-spacing: -0.01em;
+ line-height: 1.25;
+ color: var(--admin-text);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.support-inbox-row-main > small {
+ display: block;
+ margin: 0;
+ color: var(--admin-muted);
+ font-size: 12px;
+ font-weight: 600;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.support-row-badges {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 6px;
+ flex: 0 0 auto;
+}
+
+.support-row-badges small {
+ margin: 0;
+ color: var(--admin-muted);
+ font-size: 11px;
+ font-variant-numeric: tabular-nums;
+ white-space: nowrap;
+}
+
+.support-row-badges b {
+ display: inline-grid;
+ box-sizing: border-box;
+ --numeric-badge-optical-y: 0.5px;
+ min-width: 22px;
+ height: 22px;
+ place-items: center;
+ border-radius: 999px;
+ background: var(--danger);
+ color: #fff;
+ font-size: 11px;
+ font-weight: 700;
+ line-height: 1;
+ padding: 0 7px;
+ text-align: center;
+ font-variant-numeric: lining-nums;
+ font-feature-settings: "lnum";
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
+}
+
+.support-ticket-header {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 14px 16px;
+ align-items: start;
+ border: 1px solid var(--admin-border);
+ border-radius: 14px;
+ background: color-mix(in srgb, var(--admin-surface) 88%, var(--admin-bg));
+ padding: 16px;
+}
+
+.support-ticket-title {
+ display: grid;
+ gap: 8px;
+ min-width: 0;
+}
+
+.support-ticket-title small,
+.support-ticket-controls label > span {
+ color: var(--admin-muted);
+ font-size: 11px;
+ font-weight: 800;
+ line-height: 1.2;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.support-ticket-title h3 {
+ margin: 0;
+ overflow-wrap: anywhere;
+ font-size: 19px;
+ font-weight: 800;
+ letter-spacing: -0.01em;
+ line-height: 1.25;
+ color: var(--admin-text);
+}
+
+.support-ticket-title-badges {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+}
+
+.support-ticket-close {
+ justify-self: end;
+ align-self: start;
+ white-space: nowrap;
+}
+
+.support-ticket-controls {
+ grid-column: 1 / -1;
+ display: grid;
+ grid-template-columns: repeat(3, minmax(140px, 1fr));
+ gap: 10px;
+ padding-top: 12px;
+ border-top: 1px solid var(--admin-border);
+}
+
+.support-ticket-controls label {
+ display: grid;
+ gap: 6px;
+ min-width: 0;
+}
+
+.support-admin-message-scroll {
+ border-color: var(--admin-border);
+ background: color-mix(in srgb, var(--admin-bg) 70%, transparent);
+}
+
+.support-admin-messages .ticket-message-content {
+ max-width: min(78%, 760px);
+}
+
+.support-admin-messages .ticket-message-bubble {
+ --ticket-bubble-border: var(--admin-border);
+ border-color: var(--admin-border);
+}
+
+.support-admin-composer {
+ display: grid;
+ gap: 10px;
+ margin-top: 12px;
+ border: 1px solid var(--admin-border);
+ border-radius: 14px;
+ background: var(--admin-surface);
+ padding: 14px;
+ transition: border-color 0.16s ease;
+}
+
+.support-admin-composer:focus-within {
+ border-color: color-mix(in srgb, var(--accent) 48%, var(--admin-border));
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
+}
+
+.support-admin-composer-textarea {
+ min-height: 118px;
+ resize: vertical;
+}
+
+.support-admin-composer-row {
+ display: flex;
+ justify-content: space-between;
+ gap: 12px;
+ align-items: center;
+}
+
+.support-admin-note-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ min-width: 0;
+ padding: 6px 10px 6px 6px;
+ border: 1px solid var(--admin-border);
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--admin-surface-2) 78%, transparent);
+}
+
+.support-admin-note-toggle label {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ color: var(--admin-muted);
+ font-size: 13px;
+ font-weight: 700;
+ cursor: pointer;
+}
+
+.support-admin-note-toggle label svg {
+ color: var(--warning);
+}
+
+.support-user-context {
+ display: grid;
+ gap: 14px;
+ align-content: start;
+ border: 1px solid var(--admin-border);
+ border-radius: 14px;
+ background: color-mix(in srgb, var(--admin-surface) 88%, var(--admin-bg));
+ padding: 16px;
+}
+
+.support-user-context > h3 {
+ margin: 0;
+ font-size: 11px;
+ font-weight: 800;
+ letter-spacing: 0.08em;
+ line-height: 1.2;
+ color: var(--admin-muted);
+ text-transform: uppercase;
+}
+
+.support-user-context-head {
+ display: grid;
+ grid-template-columns: 48px minmax(0, 1fr);
+ gap: 12px;
+ align-items: center;
+}
+
+.support-user-context-avatar {
+ display: grid;
+ width: 48px;
+ height: 48px;
+ place-items: center;
+ overflow: hidden;
+ border: 1px solid var(--admin-border);
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--admin-surface-2) 80%, transparent);
+ color: var(--admin-text);
+ font-size: 14px;
+ font-weight: 800;
+ letter-spacing: 0.02em;
+}
+
+.support-user-context-avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.support-user-context-identity {
+ display: grid;
+ gap: 4px;
+ min-width: 0;
+}
+
+.support-user-context-identity strong {
+ font-size: 15px;
+ font-weight: 800;
+ letter-spacing: -0.01em;
+ line-height: 1.2;
+ color: var(--admin-text);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.support-user-context-identity small {
+ color: var(--admin-muted);
+ font-size: 12px;
+ font-variant-numeric: tabular-nums;
+}
+
+.support-user-context-actions {
+ display: grid;
+ gap: 8px;
+}
+
+.support-user-context dl {
+ display: grid;
+ grid-template-columns: minmax(80px, auto) 1fr;
+ gap: 8px 12px;
+ margin: 0;
+ padding: 10px 0;
+ border-top: 1px solid var(--admin-border);
+ border-bottom: 1px solid var(--admin-border);
+}
+
+.support-user-context dt {
+ margin: 0;
+ color: var(--admin-muted);
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ align-self: center;
+}
+
+.support-user-context dd {
+ margin: 0;
+ color: var(--admin-text);
+ font-size: 13px;
+ font-weight: 600;
+ overflow-wrap: anywhere;
+ align-self: center;
+}
+
+.support-user-context .admin-btn {
+ width: 100%;
+ justify-content: center;
+}
+
+@media (min-width: 981px) {
+ .support-admin-layout {
+ height: clamp(620px, calc(100dvh - var(--admin-header-h) - 120px), 820px);
+ }
+
+ .support-admin-detail {
+ grid-template-rows: auto minmax(0, 1fr) auto;
+ gap: 0;
+ border: 1px solid var(--admin-border);
+ border-radius: 14px;
+ background: color-mix(in srgb, var(--admin-surface) 92%, var(--admin-bg));
+ padding: 16px;
+ }
+
+ .support-admin-detail > .admin-empty-state {
+ min-height: 420px;
+ align-self: stretch;
+ }
+
+ .support-admin-detail .support-ticket-header {
+ border: 0;
+ border-bottom: 1px solid var(--admin-border);
+ border-radius: 0;
+ background: transparent;
+ padding: 0 0 14px;
+ }
+
+ .support-admin-detail .support-admin-message-scroll {
+ height: 100%;
+ min-height: 0;
+ max-height: none !important;
+ border: 0;
+ border-radius: 0;
+ background: transparent;
+ padding: 16px 4px;
+ }
+
+ .support-admin-detail .support-admin-composer {
+ margin-top: 0;
+ border-radius: 0;
+ border: 0;
+ border-top: 1px solid var(--admin-border);
+ background: transparent;
+ padding: 14px 0 0;
+ }
+
+ .support-admin-detail .support-admin-composer:focus-within {
+ border-color: transparent;
+ box-shadow: none;
+ }
+
+ .support-user-context {
+ position: sticky;
+ top: 0;
+ align-self: start;
+ }
+}
+
+@media (max-width: 1420px) {
+ .support-admin-layout {
+ grid-template-columns: minmax(280px, 350px) minmax(0, 1fr);
+ }
+
+ .support-user-context {
+ grid-column: 1 / -1;
+ position: static;
+ }
+}
+
+@media (max-width: 980px) {
+ .support-admin-layout {
+ grid-template-columns: 1fr;
+ gap: 12px;
+ height: auto;
+ min-height: 0;
+ }
+
+ .support-admin-inbox {
+ border-radius: 12px;
+ padding: 12px;
+ }
+
+ .support-admin-filter-row,
+ .support-ticket-controls {
+ grid-template-columns: 1fr;
+ }
+
+ .support-ticket-header {
+ grid-template-columns: 1fr;
+ padding: 14px;
+ border-radius: 12px;
+ }
+
+ .support-admin-composer,
+ .support-user-context {
+ border-radius: 12px;
+ padding: 14px;
+ }
+
+ .support-inbox-row {
+ grid-template-columns: 32px minmax(0, 1fr) auto;
+ gap: 10px;
+ padding: 11px 11px 11px 13px;
+ }
+
+ .support-inbox-row-avatar {
+ width: 32px;
+ height: 32px;
+ }
+
+ .support-row-badges {
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 4px;
+ }
+
+ .support-ticket-title h3 {
+ font-size: 17px;
+ }
+
+ .support-ticket-controls {
+ padding-top: 10px;
+ }
+
+ .support-admin-messages .ticket-message-content {
+ max-width: min(86%, calc(100vw - 80px));
+ }
+
+ .support-admin-composer-row {
+ align-items: stretch;
+ flex-direction: column;
+ }
+
+ .support-admin-composer-row .admin-btn {
+ width: 100%;
+ }
+}
+
+/* Support tickets: structured inbox + conversation workspace. */
+
+.support-admin-layout {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr);
+ gap: 14px;
+ min-height: 0;
+ width: 100%;
+}
+
+.support-admin-summary {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 10px;
+ min-width: 0;
+}
+
+.support-admin-summary span {
+ display: grid;
+ min-width: 0;
+ gap: 2px;
+ border: 1px solid var(--admin-border);
+ border-radius: 12px;
+ background: color-mix(in srgb, var(--admin-surface) 86%, var(--admin-bg));
+ padding: 12px 14px;
+ box-shadow: var(--admin-card-shadow);
+}
+
+.support-admin-summary strong {
+ color: var(--admin-text);
+ font-size: 24px;
+ font-weight: 750;
+ line-height: 1;
+ font-variant-numeric: tabular-nums;
+}
+
+.support-admin-summary small {
+ min-width: 0;
+ overflow: hidden;
+ color: var(--admin-muted);
+ font-size: 12px;
+ font-weight: 650;
+ line-height: 1.25;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.support-admin-workspace {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr);
+ gap: 14px;
+ min-height: 0;
+}
+
+.support-admin-inbox,
+.support-admin-detail,
+.support-admin-detail .support-ticket-header,
+.support-admin-detail .support-admin-composer,
+.support-user-context {
+ border: 1px solid var(--admin-border);
+ border-radius: 12px;
+ background: color-mix(in srgb, var(--admin-surface) 88%, var(--admin-bg));
+ box-shadow: var(--admin-card-shadow);
+}
+
+.support-admin-inbox {
+ display: grid;
+ grid-template-rows: auto minmax(0, 1fr);
+ gap: 12px;
+ min-width: 0;
+ min-height: 0;
+ padding: 14px;
+}
+
+.support-admin-inbox .support-admin-toolbar {
+ padding: 0;
+ border: 0;
+ background: transparent;
+ box-shadow: none;
+}
+
+.support-admin-filter-row {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 8px;
+}
+
+.support-admin-filter-row > :last-child {
+ grid-column: 1 / -1;
+}
+
+.support-inbox-list {
+ align-content: start;
+ min-height: 0;
+ overflow-y: auto;
+ padding-right: 2px;
+ scrollbar-width: thin;
+}
+
+.support-inbox-row {
+ min-height: 82px;
+ border-radius: 10px;
+ background: color-mix(in srgb, var(--admin-surface) 74%, var(--admin-bg));
+}
+
+.support-inbox-row-title strong {
+ letter-spacing: 0;
+}
+
+.support-row-badges {
+ min-width: 86px;
+ max-width: 132px;
+}
+
+.support-row-badges .admin-badge {
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.support-admin-detail {
+ display: grid;
+ grid-template-rows: auto;
+ gap: 12px;
+ min-width: 0;
+ min-height: 0;
+ padding: 14px;
+}
+
+.support-admin-detail > .admin-empty-state {
+ min-height: 360px;
+ align-self: stretch;
+}
+
+.support-admin-detail .support-ticket-header {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 14px;
+ align-items: start;
+ padding: 14px;
+}
+
+.support-ticket-actions {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.support-ticket-close {
+ white-space: nowrap;
+}
+
+.support-ticket-controls {
+ grid-column: 1 / -1;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ padding-top: 12px;
+ border-top: 1px solid var(--admin-border);
+}
+
+.support-ticket-controls label {
+ display: grid;
+ flex: 1 1 150px;
+ gap: 6px;
+ min-width: 0;
+}
+
+.support-admin-detail .support-admin-message-scroll {
+ min-height: 240px;
+ border: 1px solid var(--admin-border);
+ border-radius: 12px;
+ background: color-mix(in srgb, var(--admin-bg) 68%, transparent);
+ padding: 16px;
+}
+
+.support-admin-detail .support-admin-composer {
+ display: grid;
+ gap: 10px;
+ margin-top: 0;
+ padding: 14px;
+}
+
+.support-admin-detail .support-admin-composer-textarea {
+ min-height: 86px;
+}
+
+.support-admin-detail .support-admin-composer:focus-within {
+ border-color: color-mix(in srgb, var(--accent) 48%, var(--admin-border));
+ box-shadow:
+ var(--admin-card-shadow),
+ 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
+}
+
+.support-user-context {
+ display: grid;
+ grid-column: auto;
+ gap: 12px;
+ position: static;
+ min-width: 0;
+ padding: 12px;
+}
+
+.support-user-context-head {
+ display: grid;
+ grid-template-columns: 44px minmax(0, 1fr);
+ align-items: center;
+ gap: 12px;
+ min-width: 0;
+}
+
+.support-user-context-avatar {
+ width: 44px;
+ height: 44px;
+}
+
+.support-user-context-identity {
+ display: grid;
+ gap: 3px;
+ min-width: 0;
+}
+
+.support-user-context-identity small {
+ color: var(--admin-muted);
+ font-size: 11px;
+ font-weight: 750;
+ letter-spacing: 0.06em;
+ line-height: 1.1;
+ text-transform: uppercase;
+}
+
+.support-user-context-identity strong,
+.support-user-context-identity span {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.support-user-context-identity strong {
+ color: var(--admin-text);
+ font-size: 14px;
+ font-weight: 750;
+ line-height: 1.15;
+}
+
+.support-user-context-identity span {
+ color: var(--admin-muted);
+ font-size: 12px;
+ font-variant-numeric: tabular-nums;
+}
+
+.support-user-context-metrics {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
+ gap: 8px;
+ min-width: 0;
+}
+
+.support-user-context-metrics span {
+ display: grid;
+ gap: 4px;
+ min-width: 0;
+ border: 1px solid color-mix(in srgb, var(--admin-border) 82%, transparent);
+ border-radius: 10px;
+ background: color-mix(in srgb, var(--admin-surface-2) 68%, var(--admin-bg));
+ padding: 9px 10px;
+}
+
+.support-user-context-metrics small {
+ color: var(--admin-muted);
+ font-size: 10px;
+ font-weight: 750;
+ letter-spacing: 0.05em;
+ line-height: 1.1;
+ text-transform: uppercase;
+}
+
+.support-user-context-metrics strong {
+ min-width: 0;
+ overflow: hidden;
+ color: var(--admin-text);
+ font-size: 12px;
+ font-weight: 650;
+ line-height: 1.25;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.support-user-context-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ align-items: center;
+ justify-content: flex-start;
+}
+
+.support-user-context-actions .admin-btn {
+ width: auto;
+ justify-content: center;
+}
+
+@media (min-width: 981px) {
+ .support-admin-workspace {
+ grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
+ height: clamp(660px, calc(100dvh - var(--admin-header-h) - 112px), 840px);
+ }
+
+ .support-admin-inbox,
+ .support-admin-detail {
+ height: 100%;
+ }
+
+ .support-admin-detail {
+ grid-template-rows: auto auto minmax(0, 1fr) auto;
+ overflow: hidden;
+ }
+
+ .support-admin-detail .support-admin-message-scroll {
+ height: 100%;
+ min-height: 0;
+ max-height: none !important;
+ overflow: auto;
+ }
+}
+
+@media (min-width: 1360px) {
+ .support-user-context {
+ grid-template-columns: minmax(170px, 0.65fr) minmax(260px, 1.35fr) auto;
+ align-items: center;
+ }
+
+ .support-user-context-actions {
+ justify-content: flex-end;
+ }
+}
+
+@media (max-width: 640px) {
+ .support-admin-summary {
+ grid-template-columns: minmax(0, 1fr);
+ }
+
+ .support-admin-detail .support-ticket-header {
+ grid-template-columns: minmax(0, 1fr);
+ }
+
+ .support-ticket-actions {
+ justify-content: stretch;
+ }
+
+ .support-ticket-actions .admin-btn,
+ .support-user-context-actions .admin-btn {
+ width: 100%;
+ }
+
+ .support-ticket-controls,
+ .support-admin-composer-row {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .support-ticket-controls label {
+ flex-basis: auto;
+ }
+
+ .support-inbox-row {
+ grid-template-columns: 32px minmax(0, 1fr);
+ }
+
+ .support-row-badges {
+ grid-column: 2;
+ max-width: none;
+ min-width: 0;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ }
+}
+
+/* Support tickets v2: one-column admin list with modal ticket details. */
+
+.support-admin-layout {
+ grid-template-columns: minmax(0, 1fr);
+ grid-template-rows: auto minmax(0, 1fr);
+ align-content: start;
+ gap: 14px;
+ flex: 1 1 auto;
+ height: 100%;
+ min-height: 0;
+}
+
+.support-admin-summary span {
+ min-height: 66px;
+}
+
+.support-admin-list-panel {
+ display: grid;
+ grid-template-rows: auto auto minmax(0, 1fr);
+ gap: 12px;
+ min-width: 0;
+ min-height: 0;
+ border: 1px solid var(--admin-border);
+ border-radius: 12px;
+ background: color-mix(in srgb, var(--admin-surface) 88%, var(--admin-bg));
+ box-shadow: var(--admin-card-shadow);
+ padding: 14px;
+}
+
+.support-admin-ticket-tabs {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 8px;
+ min-width: 0;
+ border: 1px solid var(--admin-border);
+ border-radius: 10px;
+ background: color-mix(in srgb, var(--admin-bg) 78%, var(--admin-surface));
+ padding: 4px;
+}
+
+.support-admin-ticket-tabs button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ min-width: 0;
+ min-height: 34px;
+ border: 0;
+ border-radius: 8px;
+ background: transparent;
+ color: var(--admin-muted);
+ font: inherit;
+ font-size: 13px;
+ font-weight: 750;
+ cursor: pointer;
+}
+
+.support-admin-ticket-tabs button.active {
+ background: var(--admin-surface);
+ color: var(--admin-text);
+ box-shadow: var(--admin-card-shadow);
+}
+
+.support-admin-ticket-tabs button b {
+ display: inline-grid;
+ min-width: 21px;
+ height: 21px;
+ place-items: center;
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--admin-surface-2) 76%, transparent);
+ color: var(--admin-muted);
+ font-size: 11px;
+ font-weight: 850;
+ padding-inline: 7px;
+}
+
+.support-admin-ticket-tabs button.active b {
+ background: color-mix(in srgb, var(--accent) 18%, transparent);
+ color: color-mix(in srgb, var(--accent) 78%, white);
+}
+
+.support-admin-list-panel .support-admin-toolbar {
+ display: grid;
+ grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.35fr);
+ gap: 10px;
+ align-items: start;
+ padding: 0;
+ border: 0;
+ background: transparent;
+ box-shadow: none;
+}
+
+.support-admin-list-panel .support-admin-search .input {
+ box-sizing: border-box;
+ height: 36px;
+ padding-left: 42px;
+}
+
+.support-admin-list-panel .support-admin-filter-row {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 8px;
+ align-items: stretch;
+}
+
+.support-admin-list-panel .support-admin-filter-row .admin-select-trigger,
+.support-admin-list-panel .support-admin-filter-row .admin-btn {
+ height: 46px;
+ min-height: 46px;
+}
+
+.support-admin-list-panel .support-admin-filter-row > :last-child {
+ grid-column: auto;
+}
+
+.support-admin-list-panel .support-inbox-list {
+ display: grid;
+ align-content: start;
+ gap: 8px;
+ min-height: 0;
+ height: 100%;
+ overflow: auto;
+ padding: 0;
+ padding-right: 4px;
+ scrollbar-width: thin;
+}
+
+.support-admin-list-panel > .admin-empty-state {
+ align-self: stretch;
+ min-height: 0;
+ height: 100%;
+ display: grid;
+ place-items: center;
+ border: 1px dashed color-mix(in srgb, var(--admin-border) 84%, transparent);
+ border-radius: 10px;
+ background: color-mix(in srgb, var(--admin-bg) 66%, transparent);
+}
+
+.support-admin-list-panel .support-inbox-row {
+ min-height: 74px;
+ grid-template-columns: 38px minmax(0, 1fr) auto;
+ border-radius: 10px;
+ background: color-mix(in srgb, var(--admin-surface) 74%, var(--admin-bg));
+}
+
+.support-admin-list-panel .support-inbox-row[data-priority="high"]::before {
+ background: var(--warning);
+}
+
+.support-admin-list-panel .support-inbox-row[data-priority="urgent"]::before {
+ background: var(--danger);
+}
+
+.support-admin-list-panel .support-inbox-row-avatar {
+ width: 38px;
+ height: 38px;
+}
+
+.support-admin-list-panel .support-row-badges {
+ min-width: 168px;
+ max-width: 240px;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.support-admin-list-panel .support-row-badges small {
+ flex-basis: 100%;
+ text-align: right;
+}
+
+.support-ticket-list-skeleton {
+ display: grid;
+ gap: 8px;
+}
+
+.support-ticket-row-skeleton {
+ display: grid;
+ grid-template-columns: 38px minmax(0, 1fr) minmax(120px, auto);
+ align-items: center;
+ gap: 12px;
+ min-height: 74px;
+ border: 1px solid var(--admin-border);
+ border-radius: 10px;
+ background: color-mix(in srgb, var(--admin-surface) 74%, var(--admin-bg));
+ padding: 12px 14px;
+}
+
+.support-ticket-row-skeleton-main,
+.support-ticket-row-skeleton-side {
+ display: grid;
+ gap: 8px;
+ min-width: 0;
+}
+
+.support-ticket-row-skeleton-side {
+ justify-items: end;
+}
+
+.support-ticket-dialog {
+ display: grid;
+ grid-template-rows: auto minmax(0, 1fr);
+ width: min(1040px, calc(100vw - 28px));
+ max-height: min(840px, calc(100dvh - 28px));
+ overflow: hidden;
+}
+
+.support-ticket-dialog-body {
+ display: grid;
+ grid-template-rows: auto auto minmax(180px, 1fr) auto;
+ gap: 12px;
+ min-width: 0;
+ min-height: 0;
+ overflow: hidden;
+}
+
+.support-ticket-dialog .support-ticket-header,
+.support-ticket-dialog .support-user-context,
+.support-ticket-dialog .support-admin-composer {
+ border: 1px solid var(--admin-border);
+ border-radius: 12px;
+ background: color-mix(in srgb, var(--admin-surface) 88%, var(--admin-bg));
+ box-shadow: none;
+}
+
+.support-ticket-dialog .support-ticket-header {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 14px;
+ padding: 14px;
+}
+
+.support-ticket-dialog .support-user-context {
+ padding: 12px;
+}
+
+.support-ticket-dialog .support-admin-message-scroll {
+ min-height: 0;
+ height: 100%;
+ max-height: none !important;
+ overflow: auto;
+ border: 1px solid var(--admin-border);
+ border-radius: 12px;
+ background: color-mix(in srgb, var(--admin-bg) 68%, transparent);
+ padding: 16px;
+}
+
+.support-ticket-dialog .support-admin-composer {
+ margin: 0;
+ padding: 12px;
+}
+
+.support-ticket-dialog .support-admin-composer-textarea {
+ min-height: 76px;
+}
+
+.support-ticket-dialog-skeleton {
+ display: grid;
+ gap: 12px;
+ min-width: 0;
+}
+
+@media (max-width: 1120px) {
+ .support-admin-list-panel .support-admin-toolbar,
+ .support-admin-list-panel .support-admin-filter-row {
+ grid-template-columns: minmax(0, 1fr);
+ }
+}
+
+@media (max-width: 720px) {
+ .support-admin-summary {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 8px;
+ }
+
+ .support-admin-summary span {
+ min-height: 56px;
+ border-radius: 10px;
+ padding: 9px 8px;
+ }
+
+ .support-admin-summary strong {
+ font-size: 20px;
+ }
+
+ .support-admin-summary small {
+ font-size: 10px;
+ }
+
+ .support-admin-list-panel {
+ padding: 12px;
+ }
+
+ .support-admin-list-panel .support-inbox-row,
+ .support-ticket-row-skeleton {
+ grid-template-columns: 34px minmax(0, 1fr);
+ gap: 10px;
+ }
+
+ .support-admin-list-panel .support-row-badges,
+ .support-ticket-row-skeleton-side {
+ grid-column: 2;
+ min-width: 0;
+ max-width: none;
+ justify-content: flex-start;
+ justify-items: start;
+ }
+
+ .support-admin-list-panel .support-row-badges small {
+ flex-basis: auto;
+ text-align: left;
+ }
+
+ .support-ticket-dialog {
+ width: calc(100vw - 16px);
+ max-height: calc(100dvh - 16px);
+ border-radius: 14px;
+ overflow-y: auto;
+ }
+
+ .support-ticket-dialog-body {
+ grid-template-rows: auto auto auto auto;
+ gap: 10px;
+ overflow: visible;
+ }
+
+ .support-ticket-dialog .support-ticket-header {
+ grid-template-columns: minmax(0, 1fr);
+ padding: 12px;
+ }
+
+ .support-ticket-dialog .support-ticket-actions {
+ justify-content: stretch;
+ }
+
+ .support-ticket-dialog .support-ticket-actions .admin-btn {
+ width: 100%;
+ }
+
+ .support-ticket-dialog .support-admin-message-scroll {
+ height: auto;
+ min-height: 180px;
+ max-height: min(32dvh, 260px) !important;
+ padding: 12px 10px;
+ }
+
+ .support-ticket-dialog .support-admin-composer-row {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .support-ticket-dialog .support-admin-composer-row .admin-btn {
+ width: 100%;
+ }
+}
+
+/* Support ticket dialog v3: one readable page, compact metadata, no nested chat scroll. */
+
+.dialog:has(.support-ticket-dialog) {
+ align-items: start;
+ overflow-y: auto;
+}
+
+.support-ticket-dialog {
+ display: grid;
+ grid-template-rows: auto;
+ gap: 10px;
+ width: min(940px, calc(100vw - 24px));
+ max-height: none;
+ margin-block: 0;
+ overflow: visible;
+ padding: 14px;
+ border-radius: 16px;
+}
+
+.support-ticket-dialog .dialog-head {
+ align-items: center;
+ gap: 10px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid var(--admin-border);
+}
+
+.support-ticket-dialog .dialog-head h2 {
+ overflow: hidden;
+ font-size: 18px;
+ line-height: 1.2;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.support-ticket-dialog .dialog-head p {
+ margin-top: 3px;
+ font-size: 12px;
+ line-height: 1.25;
+}
+
+.support-ticket-dialog-body {
+ display: grid;
+ grid-template-rows: auto;
+ gap: 10px;
+ min-width: 0;
+ min-height: 0;
+ overflow: visible;
+}
+
+.support-ticket-dialog .support-ticket-header,
+.support-ticket-dialog .support-user-context,
+.support-ticket-dialog .support-admin-composer {
+ border-radius: 10px;
+ box-shadow: none;
+}
+
+.support-ticket-dialog .support-ticket-header {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 8px;
+ align-items: center;
+ padding: 10px;
+}
+
+.support-ticket-statusbar {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ align-items: center;
+ min-width: 0;
+}
+
+.support-ticket-statusbar .admin-badge {
+ max-width: 180px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.support-ticket-dialog .support-ticket-actions {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.support-ticket-dialog .support-ticket-close {
+ min-height: 34px;
+ white-space: nowrap;
+}
+
+.support-ticket-dialog .support-ticket-controls {
+ grid-column: 1 / -1;
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 8px;
+ padding-top: 8px;
+ border-top: 1px solid var(--admin-border);
+}
+
+.support-ticket-dialog .support-ticket-controls .admin-select-trigger {
+ height: 34px;
+ min-width: 0;
+ padding-inline: 10px;
+}
+
+.support-ticket-dialog .support-ticket-controls .admin-select-trigger span {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.support-ticket-dialog .support-user-context {
+ display: grid;
+ grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.4fr) auto;
+ gap: 10px;
+ align-items: center;
+ padding: 10px;
+}
+
+.support-ticket-dialog .support-user-context-head {
+ grid-template-columns: 34px minmax(0, 1fr);
+ gap: 9px;
+}
+
+.support-ticket-dialog .support-user-context-avatar {
+ width: 34px;
+ height: 34px;
+ font-size: 12px;
+}
+
+.support-ticket-dialog .support-user-context-identity {
+ gap: 2px;
+}
+
+.support-ticket-dialog .support-user-context-identity strong {
+ font-size: 13px;
+}
+
+.support-ticket-dialog .support-user-context-identity small {
+ overflow: hidden;
+ color: var(--admin-muted);
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0;
+ text-overflow: ellipsis;
+ text-transform: none;
+ white-space: nowrap;
+}
+
+.support-ticket-dialog .support-user-context-metrics {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 6px;
+}
+
+.support-ticket-dialog .support-user-context-metrics span {
+ gap: 2px;
+ min-height: 44px;
+ border-radius: 8px;
+ padding: 6px 8px;
+}
+
+.support-ticket-dialog .support-user-context-metrics small {
+ font-size: 9px;
+ line-height: 1;
+}
+
+.support-ticket-dialog .support-user-context-metrics strong {
+ font-size: 11px;
+ line-height: 1.2;
+}
+
+.support-ticket-dialog .support-user-context-actions {
+ display: flex;
+ gap: 6px;
+ justify-content: flex-end;
+}
+
+.support-ticket-dialog .support-user-context-actions .admin-btn {
+ width: 30px;
+ min-width: 30px;
+ height: 30px;
+ min-height: 30px;
+ border-radius: 7px;
+ padding: 0;
+ white-space: nowrap;
+}
+
+.support-ticket-dialog .support-admin-message-scroll {
+ height: auto;
+ min-height: 0;
+ max-height: none !important;
+ overflow: visible;
+ border-radius: 10px;
+ padding: 12px;
+}
+
+.support-ticket-dialog .support-admin-messages {
+ gap: 12px;
+}
+
+.support-ticket-dialog .support-admin-composer {
+ margin: 0;
+ padding: 10px;
+}
+
+.support-ticket-dialog .support-admin-composer-textarea {
+ min-height: 74px;
+}
+
+.support-ticket-dialog .support-admin-composer-row {
+ gap: 8px;
+}
+
+@media (min-width: 721px) {
+ .dialog:has(.support-ticket-dialog) {
+ align-items: start;
+ }
+
+ .support-ticket-dialog {
+ grid-template-rows: auto minmax(0, 1fr);
+ height: calc(100dvh - 28px);
+ min-height: calc(100dvh - 28px);
+ max-height: calc(100dvh - 28px);
+ overflow: hidden;
+ }
+
+ .support-ticket-dialog-body {
+ grid-template-rows: auto auto minmax(0, 1fr) auto;
+ min-height: 0;
+ overflow: hidden;
+ }
+
+ .support-ticket-dialog .support-admin-message-scroll {
+ height: 100%;
+ min-height: 320px;
+ overflow: auto;
+ }
+}
+
+@media (max-width: 720px) {
+ .dialog:has(.support-ticket-dialog) {
+ padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
+ max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
+ }
+
+ .support-ticket-dialog {
+ width: calc(100vw - 16px);
+ max-height: none;
+ padding: 12px;
+ border-radius: 14px;
+ overflow: visible;
+ }
+
+ .support-ticket-dialog .dialog-head {
+ padding-bottom: 8px;
+ }
+
+ .support-ticket-dialog .dialog-head h2 {
+ font-size: 16px;
+ }
+
+ .support-ticket-dialog .support-ticket-header {
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 8px;
+ padding: 9px;
+ }
+
+ .support-ticket-dialog .support-ticket-actions {
+ justify-content: flex-start;
+ }
+
+ .support-ticket-dialog .support-ticket-actions .admin-btn {
+ width: auto;
+ }
+
+ .support-ticket-dialog .support-ticket-controls {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 6px;
+ }
+
+ .support-ticket-dialog .support-ticket-controls .admin-select-trigger {
+ height: 32px;
+ padding-inline: 8px;
+ font-size: 12px;
+ }
+
+ .support-ticket-dialog .support-user-context {
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 8px;
+ padding: 9px;
+ }
+
+ .support-ticket-dialog .support-user-context-metrics {
+ grid-column: 1 / -1;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+
+ .support-ticket-dialog .support-user-context-actions {
+ grid-column: 2;
+ grid-row: 1;
+ align-self: center;
+ justify-content: flex-start;
+ }
+
+ .support-ticket-dialog .support-admin-message-scroll {
+ height: auto;
+ min-height: 0;
+ max-height: none !important;
+ padding: 10px 8px;
+ }
+
+ .support-ticket-dialog .support-admin-composer-row {
+ flex-direction: row;
+ align-items: center;
+ }
+
+ .support-ticket-dialog .support-admin-composer-row .admin-btn {
+ width: auto;
+ }
+}
diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css
index bc75e07..12f8345 100644
--- a/frontend/src/styles/components.css
+++ b/frontend/src/styles/components.css
@@ -26,9 +26,10 @@
border-radius: 12px;
border: 1px solid var(--admin-border);
background:
- linear-gradient(135deg, var(--surface-sheen), var(--surface-sheen-soft)),
- var(--admin-surface);
- box-shadow: var(--shadow-soft), inset 0 1px 0 var(--inset-highlight);
+ linear-gradient(135deg, var(--surface-sheen), var(--surface-sheen-soft)), var(--admin-surface);
+ box-shadow:
+ var(--shadow-soft),
+ inset 0 1px 0 var(--inset-highlight);
position: relative;
overflow: hidden;
}
@@ -292,3 +293,1506 @@
}
}
+.textarea {
+ width: 100%;
+ min-height: 92px;
+ resize: vertical;
+ border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
+ border-radius: 8px;
+ background: var(--input-bg, rgba(255, 255, 255, 0.06));
+ color: inherit;
+ padding: 10px 12px;
+ font: inherit;
+}
+
+.scroll-area {
+ overflow: auto;
+ min-height: 0;
+}
+
+.scroll-area--mono {
+ scrollbar-gutter: stable;
+ scrollbar-width: thin;
+ scrollbar-color: color-mix(
+ in srgb,
+ var(--admin-muted, var(--muted)) 34%,
+ var(--admin-border, var(--border))
+ )
+ transparent;
+}
+
+.scroll-area--mono::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+.scroll-area--mono::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.scroll-area--mono::-webkit-scrollbar-thumb {
+ border: 2px solid transparent;
+ border-radius: 999px;
+ background: color-mix(
+ in srgb,
+ var(--admin-muted, var(--muted)) 34%,
+ var(--admin-border, var(--border))
+ );
+ background-clip: padding-box;
+}
+
+.scroll-area--mono::-webkit-scrollbar-thumb:hover {
+ background: color-mix(
+ in srgb,
+ var(--admin-muted, var(--muted)) 48%,
+ var(--admin-border, var(--border))
+ );
+ background-clip: padding-box;
+}
+
+.attention-dot {
+ position: absolute;
+ top: 0;
+ right: 0;
+ min-width: 13px;
+ width: 13px;
+ height: 13px;
+ border-radius: 999px;
+ background: #ff4b4b;
+ box-shadow: 0 0 0 0 rgba(255, 75, 75, 0.75);
+ animation: attention-pulse 1.6s ease-out infinite;
+ transform: translate(50%, -50%);
+ pointer-events: none;
+}
+
+.attention-dot-inline {
+ position: static;
+ display: block;
+ flex: 0 0 auto;
+ transform: none;
+}
+
+@keyframes attention-pulse {
+ 0% {
+ box-shadow: 0 0 0 0 rgba(255, 75, 75, 0.75);
+ }
+
+ 70% {
+ box-shadow: 0 0 0 8px rgba(255, 75, 75, 0);
+ }
+
+ 100% {
+ box-shadow: 0 0 0 0 rgba(255, 75, 75, 0);
+ }
+}
+
+.nav-badge {
+ display: inline-grid;
+ box-sizing: border-box;
+ --numeric-badge-optical-y: 0.5px;
+ min-width: 20px;
+ height: 20px;
+ place-items: center;
+ border-radius: 999px;
+ background: #ef4444;
+ color: #fff;
+ font-size: 11px;
+ font-weight: 700;
+ line-height: 1;
+ padding: 0 6px;
+ text-align: center;
+ font-variant-numeric: lining-nums;
+ font-feature-settings: "lnum";
+}
+
+.numeric-badge-value {
+ display: block;
+ min-width: 0;
+ font-family: var(--font-sans);
+ font-size: inherit;
+ font-weight: inherit;
+ line-height: 1;
+ text-align: center;
+ transform: translateY(var(--numeric-badge-optical-y, 0.5px));
+ text-box-trim: trim-both;
+ text-box-edge: cap alphabetic;
+ font-variant-numeric: lining-nums;
+ font-feature-settings: "lnum";
+}
+
+@supports (text-box-trim: trim-both) {
+ .numeric-badge-value {
+ transform: none;
+ }
+}
+
+.nav-badge-floating {
+ position: absolute;
+ top: 2px;
+ right: 14px;
+}
+
+.section-heading-row {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 12px;
+ margin-bottom: 16px;
+}
+
+.support-screen {
+ display: grid;
+ align-content: start;
+ gap: 10px;
+}
+
+.support-ticket-screen {
+ display: grid;
+ align-content: start;
+ gap: 12px;
+}
+
+.support-overview-card,
+.support-list-card,
+.support-ticket-card,
+.support-conversation-card {
+ display: grid;
+ min-width: 0;
+ gap: 12px;
+ overflow: visible;
+}
+
+.support-list-card {
+ align-content: start;
+}
+
+.support-ticket-card .empty-card {
+ display: grid;
+ min-height: 160px;
+ place-items: center;
+ text-align: center;
+}
+
+.support-conversation-card {
+ gap: 12px;
+}
+
+.support-heading-row {
+ display: grid;
+ grid-template-columns: 42px minmax(0, 1fr);
+ align-items: center;
+ gap: 14px;
+}
+
+.support-heading-copy {
+ min-width: 0;
+}
+
+.support-heading-copy h1 {
+ margin: 0;
+ color: var(--accent);
+ font-size: 17px;
+ font-weight: 850;
+ line-height: 1.16;
+}
+
+.support-heading-copy p {
+ margin: 4px 0 0;
+ color: var(--muted);
+ font-size: 12px;
+ line-height: 1.35;
+}
+
+.support-heading-icon {
+ display: flex;
+ width: 42px;
+ height: 42px;
+ flex: 0 0 auto;
+ align-items: center;
+ justify-content: center;
+ color: var(--accent);
+}
+
+.support-new-ticket-button {
+ display: grid;
+ grid-template-columns: 38px minmax(0, 1fr) auto;
+ align-items: center;
+ gap: 10px;
+ width: 100%;
+ min-height: 58px;
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ background: linear-gradient(135deg, var(--surface-sheen), var(--surface-sheen-soft));
+ color: var(--text);
+ padding: 9px 10px;
+ text-align: left;
+ box-shadow: inset 0 1px 0 var(--inset-highlight);
+ transition:
+ border-color 0.16s ease,
+ background 0.16s ease,
+ box-shadow 0.16s ease;
+}
+
+.support-new-ticket-button:hover {
+ border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
+ background: color-mix(in srgb, var(--surface-muted) 84%, var(--accent) 8%);
+}
+
+.support-new-ticket-button.active {
+ border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
+ background: color-mix(in srgb, var(--surface-muted) 82%, var(--accent) 12%);
+}
+
+.support-new-ticket-button > span:not(.support-new-ticket-icon) {
+ min-width: 0;
+}
+
+.support-new-ticket-button strong,
+.support-new-ticket-button small {
+ display: block;
+}
+
+.support-new-ticket-button strong {
+ font-size: 13px;
+ line-height: 1.2;
+}
+
+.support-new-ticket-button small {
+ margin-top: 2px;
+ color: var(--muted);
+ font-size: 12px;
+ line-height: 1.3;
+}
+
+.support-new-ticket-icon {
+ display: grid;
+ width: 38px;
+ height: 38px;
+ place-items: center;
+ border-radius: 8px;
+ background: color-mix(in srgb, var(--accent) 14%, var(--surface-muted));
+ color: var(--accent);
+}
+
+.support-create-panel,
+.ticket-composer,
+.support-admin-composer {
+ display: grid;
+ gap: 10px;
+}
+
+.support-create-panel {
+ overflow: visible;
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ background: color-mix(in srgb, var(--surface-muted) 86%, transparent);
+ box-shadow: inset 0 1px 0 var(--inset-highlight);
+}
+
+.support-create-panel-inner {
+ display: grid;
+ gap: 12px;
+ padding: 12px;
+}
+
+.support-create-grid,
+.ticket-composer-row,
+.support-admin-composer-row,
+.ticket-badges {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 8px;
+ align-items: center;
+}
+
+.ticket-composer-row,
+.support-admin-composer-row,
+.ticket-badges {
+ display: flex;
+}
+
+.support-field {
+ display: grid;
+ gap: 7px;
+ min-width: 0;
+}
+
+.support-field > span,
+.support-field > small {
+ color: var(--muted);
+ font-size: 12px;
+ font-weight: 800;
+ line-height: 1.2;
+}
+
+.support-field > small {
+ justify-self: end;
+ font-weight: 700;
+}
+
+.support-message-input {
+ min-height: 128px;
+}
+
+.support-submit-button {
+ margin-top: 2px;
+}
+
+.support-select-trigger {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ align-items: center;
+ gap: 10px;
+ width: 100%;
+ min-height: 46px;
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+ background: var(--surface-muted);
+ color: var(--text);
+ padding: 0 12px;
+ text-align: left;
+ font: inherit;
+ font-size: 14px;
+ font-weight: 800;
+ box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
+}
+
+.support-select-trigger:focus-visible {
+ outline: none;
+ border-color: color-mix(in srgb, var(--accent) 72%, white);
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
+}
+
+.support-select-content {
+ z-index: 150;
+ width: var(--bits-select-anchor-width, min(250px, calc(100vw - 28px)));
+ min-width: min(180px, calc(100vw - 28px));
+ max-width: calc(100vw - 28px);
+ border: 1px solid var(--border-strong);
+ border-radius: var(--radius);
+ background: var(--panel-3);
+ box-shadow: var(--shadow-popover);
+ overflow: hidden;
+ transform-origin: top left;
+ animation: dropdown-enter 0.16s ease-out both;
+}
+
+.support-select-viewport {
+ max-height: min(240px, 45dvh);
+ padding: 6px;
+}
+
+.support-select-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ min-height: 38px;
+ border-radius: 6px;
+ padding: 8px 9px;
+ color: var(--text);
+ font-size: 13px;
+ cursor: pointer;
+}
+
+.support-select-item[data-highlighted] {
+ background: var(--surface-hover);
+}
+
+.support-select-check {
+ opacity: 0;
+ color: var(--accent);
+}
+
+.support-select-item[data-selected] .support-select-check {
+ opacity: 1;
+}
+
+.support-status-tabs {
+ min-width: 0;
+}
+
+.support-status-tabs-list {
+ display: flex;
+ width: 100%;
+ max-width: 100%;
+ align-items: center;
+ gap: 4px;
+ overflow-x: auto;
+ border: 1px solid var(--border);
+ border-radius: 10px;
+ background: color-mix(in srgb, var(--surface-muted) 86%, transparent);
+ padding: 4px;
+ scrollbar-width: none;
+ box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
+}
+
+.support-status-tabs-list::-webkit-scrollbar {
+ display: none;
+}
+
+.support-status-tabs-trigger {
+ appearance: none;
+ display: inline-flex;
+ flex: 0 0 auto;
+ align-items: center;
+ justify-content: center;
+ gap: 7px;
+ min-height: 34px;
+ border: 0;
+ border-radius: 8px;
+ background: transparent;
+ color: var(--muted);
+ font: inherit;
+ font-size: 13px;
+ font-weight: 800;
+ line-height: 1;
+ padding: 8px 11px;
+ white-space: nowrap;
+ cursor: pointer;
+ outline: none;
+ transition:
+ background 0.16s ease,
+ color 0.16s ease,
+ box-shadow 0.16s ease,
+ transform 0.16s ease;
+}
+
+.support-status-tabs-trigger b {
+ display: inline-grid;
+ min-width: 20px;
+ height: 20px;
+ place-items: center;
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
+ color: var(--muted);
+ font-size: 11px;
+ font-weight: 800;
+ padding-inline: 6px;
+}
+
+.support-status-tabs-trigger:hover {
+ color: var(--text);
+}
+
+.support-status-tabs-trigger[data-state="active"] {
+ background: var(--panel);
+ color: var(--text);
+ box-shadow: var(--shadow-soft);
+}
+
+.support-status-tabs-trigger[data-state="active"] b {
+ background: color-mix(in srgb, var(--accent) 18%, transparent);
+ color: color-mix(in srgb, var(--accent) 78%, white);
+}
+
+.support-status-tabs-trigger:focus-visible {
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
+}
+
+.support-list-card .ticket-list {
+ display: grid;
+ gap: 10px;
+}
+
+.support-list-card .empty-card {
+ display: grid;
+ min-height: 180px;
+ place-items: center;
+ text-align: center;
+}
+
+.support-user-list-skeleton {
+ display: grid;
+ gap: 10px;
+ min-width: 0;
+}
+
+.support-user-ticket-skeleton {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
+ align-items: center;
+ gap: 14px;
+ min-height: 78px;
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ background: color-mix(in srgb, var(--panel-2) 92%, transparent);
+ padding: 14px 14px 14px 18px;
+}
+
+.support-user-ticket-skeleton-main,
+.support-user-ticket-skeleton-side {
+ display: grid;
+ gap: 9px;
+ min-width: 0;
+}
+
+.support-user-ticket-skeleton-side {
+ justify-items: end;
+}
+
+.ticket-list,
+.ticket-message-list,
+.support-admin-messages,
+.support-inbox-list {
+ display: grid;
+ gap: 10px;
+}
+
+.ticket-card {
+ position: relative;
+ width: 100%;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ align-items: center;
+ gap: 14px;
+ text-align: left;
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ background: color-mix(in srgb, var(--panel-2) 92%, transparent);
+ color: inherit;
+ padding: 14px 14px 14px 18px;
+ cursor: pointer;
+ transition:
+ border-color 0.16s ease,
+ background 0.16s ease,
+ box-shadow 0.16s ease;
+}
+
+.ticket-card::before {
+ content: "";
+ position: absolute;
+ inset: 10px auto 10px 6px;
+ width: 3px;
+ border-radius: 3px;
+ background: var(--ticket-accent, var(--border-strong));
+ transition: background 0.16s ease;
+}
+
+.ticket-card[data-status="open"],
+.ticket-card[data-status="awaiting_admin"] {
+ --ticket-accent: var(--accent);
+}
+.ticket-card[data-status="awaiting_user"] {
+ --ticket-accent: var(--info);
+}
+.ticket-card[data-status="resolved"],
+.ticket-card[data-status="closed"] {
+ --ticket-accent: color-mix(in srgb, var(--muted) 70%, transparent);
+}
+.ticket-card[data-priority="urgent"] {
+ --ticket-accent: var(--danger);
+}
+
+.ticket-card:hover {
+ border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
+ background: color-mix(in srgb, var(--panel-2) 86%, var(--accent) 6%);
+ box-shadow: var(--shadow-soft);
+}
+
+.ticket-card:focus-visible {
+ outline: none;
+ border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
+}
+
+.ticket-card-main,
+.ticket-card-title,
+.ticket-card-side,
+.ticket-card-badges,
+.ticket-card-meta {
+ min-width: 0;
+}
+
+.ticket-card-main {
+ display: grid;
+ gap: 6px;
+}
+
+.ticket-card-side {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 8px;
+}
+
+.ticket-card-title {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+}
+
+.ticket-card-title svg {
+ flex: 0 0 auto;
+ color: color-mix(in srgb, var(--accent) 72%, var(--muted));
+}
+
+.ticket-card-title strong {
+ overflow: hidden;
+ font-size: 15px;
+ font-weight: 800;
+ letter-spacing: -0.01em;
+ line-height: 1.25;
+ color: var(--text);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.ticket-card-meta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 4px 8px;
+ color: var(--muted);
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 1.2;
+}
+
+.ticket-card-meta > span + span::before {
+ content: "·";
+ margin-right: 8px;
+ color: color-mix(in srgb, var(--muted) 60%, transparent);
+}
+
+.ticket-card-badges,
+.ticket-badges {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ gap: 6px;
+}
+
+.ticket-status-badge,
+.ticket-priority-badge,
+.ticket-message-role-badge {
+ border: 1px solid var(--border);
+ background: color-mix(in srgb, var(--surface-muted) 80%, transparent);
+ color: var(--muted);
+ font-weight: 700;
+ letter-spacing: 0.01em;
+ text-transform: none;
+}
+
+.ticket-status-badge--open,
+.ticket-status-badge--awaiting_admin {
+ border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
+ background: color-mix(in srgb, var(--accent) 14%, transparent);
+ color: color-mix(in srgb, var(--accent) 80%, white);
+}
+
+.ticket-status-badge--awaiting_user {
+ border-color: color-mix(in srgb, var(--info) 38%, var(--border));
+ background: color-mix(in srgb, var(--info) 14%, transparent);
+ color: var(--info-text);
+}
+
+.ticket-status-badge--closed,
+.ticket-status-badge--resolved {
+ border-color: color-mix(in srgb, var(--muted) 24%, var(--border));
+ background: color-mix(in srgb, var(--muted) 10%, transparent);
+ color: var(--muted);
+}
+
+.ticket-priority-badge--normal,
+.ticket-priority-badge--low {
+ border-color: var(--border);
+ background: color-mix(in srgb, var(--surface-muted) 80%, transparent);
+ color: var(--muted);
+}
+
+.ticket-priority-badge--high {
+ border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
+ background: color-mix(in srgb, var(--warning) 14%, transparent);
+ color: var(--warning-text);
+}
+
+.ticket-priority-badge--urgent {
+ border-color: color-mix(in srgb, var(--danger) 48%, var(--border));
+ background: color-mix(in srgb, var(--danger) 14%, transparent);
+ color: var(--danger-text);
+}
+
+.ticket-card-unread {
+ display: inline-grid;
+ box-sizing: border-box;
+ --numeric-badge-optical-y: 0.5px;
+ min-width: 22px;
+ height: 22px;
+ place-items: center;
+ border-radius: 999px;
+ background: var(--danger);
+ color: #fff;
+ font-size: 11px;
+ font-weight: 700;
+ line-height: 1;
+ padding: 0 7px;
+ text-align: center;
+ font-variant-numeric: lining-nums;
+ font-feature-settings: "lnum";
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
+}
+
+.ticket-card-unread-dot {
+ flex: 0 0 auto;
+}
+
+.support-ticket-detail-header {
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr);
+ gap: 10px 12px;
+ align-items: start;
+ margin-bottom: 0;
+}
+
+.support-back-button {
+ align-self: start;
+}
+
+.ticket-detail-title {
+ min-width: 0;
+}
+
+.ticket-detail-title small {
+ display: block;
+ margin-bottom: 4px;
+ color: var(--muted);
+ font-size: 12px;
+ font-weight: 800;
+}
+
+.ticket-detail-title h1 {
+ margin: 0;
+ overflow-wrap: anywhere;
+ font-size: 20px;
+ line-height: 1.18;
+}
+
+.support-ticket-detail-header .ticket-badges {
+ grid-column: 2;
+ justify-content: flex-start;
+}
+
+.support-ticket-state-card {
+ align-content: stretch;
+}
+
+.support-empty-state {
+ display: grid;
+ grid-column: 1 / -1;
+ min-height: 170px;
+ place-items: center;
+ gap: 9px;
+ border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--border));
+ border-radius: var(--radius);
+ background: color-mix(in srgb, var(--panel) 86%, transparent);
+ color: var(--text);
+ padding: 22px 18px;
+ text-align: center;
+}
+
+.support-empty-state svg {
+ color: var(--accent);
+}
+
+.support-empty-state strong {
+ font-size: 18px;
+ line-height: 1.2;
+}
+
+.support-empty-state small {
+ max-width: 260px;
+ color: var(--muted);
+ font-size: 13px;
+ line-height: 1.4;
+}
+
+.ticket-message-meta time {
+ display: block;
+ color: var(--muted);
+ margin: 0;
+}
+
+.support-message-scroll,
+.support-admin-message-scroll {
+ border: 1px solid var(--border);
+ border-radius: 14px;
+ background: color-mix(in srgb, var(--panel) 70%, transparent);
+ padding: 14px;
+}
+
+.support-ticket-screen .support-message-scroll {
+ overflow: visible;
+}
+
+.support-conversation-card--loading {
+ grid-template-rows: minmax(0, 1fr);
+}
+
+.ticket-message-list,
+.support-admin-messages {
+ gap: 16px;
+}
+
+.ticket-message-list--loading {
+ align-content: end;
+ min-height: 100%;
+}
+
+.ticket-message-skeleton-row {
+ display: grid;
+ grid-template-columns: 32px minmax(0, min(72%, 520px));
+ align-items: end;
+ gap: 10px;
+ min-width: 0;
+}
+
+.ticket-message-skeleton-row--outgoing {
+ grid-template-columns: minmax(0, min(72%, 520px)) 32px;
+ justify-content: end;
+}
+
+.ticket-message-skeleton-row--outgoing .ui-skeleton-dot {
+ grid-column: 2;
+ grid-row: 1;
+}
+
+.ticket-message-skeleton-row--outgoing .ticket-message-skeleton-content {
+ grid-column: 1;
+ grid-row: 1;
+ justify-items: end;
+}
+
+.ticket-message-skeleton-content {
+ display: grid;
+ gap: 7px;
+ min-width: 0;
+}
+
+.ticket-message-row {
+ display: grid;
+ grid-template-columns: 36px minmax(0, 1fr);
+ gap: 10px;
+ align-items: flex-end;
+ min-width: 0;
+ animation: ticket-message-enter 0.18s ease-out both;
+}
+
+.ticket-message-row--outgoing {
+ grid-template-columns: minmax(0, 1fr) 36px;
+}
+
+.ticket-message-row--outgoing .ticket-message-avatar {
+ grid-column: 2;
+ grid-row: 1;
+}
+
+.ticket-message-row--outgoing .ticket-message-content {
+ grid-column: 1;
+ grid-row: 1;
+ justify-self: end;
+ align-items: flex-end;
+}
+
+.ticket-message-row--incoming .ticket-message-content {
+ grid-column: 2;
+ grid-row: 1;
+ justify-self: start;
+ align-items: flex-start;
+}
+
+.ticket-message-avatar {
+ display: grid;
+ width: 36px;
+ height: 36px;
+ place-items: center;
+ overflow: hidden;
+ border: 1px solid var(--border);
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--surface-muted) 78%, transparent);
+ color: var(--muted);
+}
+
+.ticket-message-avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.ticket-message-avatar strong {
+ color: var(--text);
+ font-size: 11px;
+ font-weight: 800;
+ letter-spacing: 0.02em;
+}
+
+.ticket-message-avatar .brand-mark {
+ width: 100%;
+ height: 100%;
+ color: inherit;
+ font-size: 22px;
+}
+
+.ticket-message-row--admin {
+ --ticket-bubble-bg: color-mix(in srgb, var(--info) 14%, var(--panel-2));
+ --ticket-bubble-border: color-mix(in srgb, var(--info) 32%, var(--border));
+ --ticket-bubble-text: #eaf3ff;
+}
+
+.ticket-message-row--user {
+ --ticket-bubble-bg: color-mix(in srgb, var(--accent) 18%, var(--panel-2));
+ --ticket-bubble-border: color-mix(in srgb, var(--accent) 38%, var(--border));
+ --ticket-bubble-text: #f4fff9;
+}
+
+.ticket-message-row--system {
+ --ticket-bubble-bg: color-mix(in srgb, var(--surface-muted) 72%, var(--panel-2));
+ --ticket-bubble-border: var(--border);
+ --ticket-bubble-text: var(--text);
+}
+
+.ticket-message-row--admin .ticket-message-avatar {
+ border-color: color-mix(in srgb, var(--info) 32%, var(--border));
+ background: color-mix(in srgb, var(--info) 12%, transparent);
+ color: var(--info-text);
+}
+
+.ticket-message-row--user .ticket-message-avatar {
+ border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
+ background: color-mix(in srgb, var(--accent) 12%, transparent);
+ color: var(--accent);
+}
+
+.ticket-message-row--internal .ticket-message-avatar {
+ border-style: dashed;
+ border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
+ background: color-mix(in srgb, var(--warning) 10%, transparent);
+ color: var(--warning-text);
+}
+
+.ticket-message-content {
+ display: flex;
+ width: fit-content;
+ max-width: min(82%, 680px);
+ min-width: 0;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.ticket-message-meta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 5px;
+ min-width: 0;
+ padding: 0 4px;
+ color: var(--muted);
+ font-size: 11px;
+ line-height: 1.1;
+}
+
+.ticket-message-row--outgoing .ticket-message-meta {
+ justify-content: flex-end;
+}
+
+.ticket-message-author {
+ min-width: 0;
+ overflow: hidden;
+ color: color-mix(in srgb, var(--muted) 84%, var(--text));
+ font-weight: 650;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.ticket-message-meta time {
+ font-size: 11px;
+ font-variant-numeric: tabular-nums;
+ line-height: 1;
+}
+
+.ticket-message-bubble {
+ width: fit-content;
+ max-width: 100%;
+ border: 1px solid var(--ticket-bubble-border, var(--border));
+ border-radius: 14px 14px 14px 4px;
+ background: var(--ticket-bubble-bg, color-mix(in srgb, var(--panel-2) 92%, transparent));
+ padding: 10px 13px;
+ white-space: pre-wrap;
+}
+
+.ticket-message-bubble p {
+ margin: 0;
+ overflow-wrap: anywhere;
+ word-break: normal;
+ color: var(--ticket-bubble-text, var(--text));
+ font-size: 14px;
+ line-height: 1.5;
+}
+
+.ticket-message-row--outgoing .ticket-message-bubble {
+ border-radius: 14px 14px 4px 14px;
+}
+
+.ticket-message-row--internal .ticket-message-bubble {
+ --ticket-bubble-bg: color-mix(in srgb, var(--warning) 8%, var(--panel-2));
+ --ticket-bubble-border: color-mix(in srgb, var(--warning) 28%, var(--border));
+ border-style: dashed;
+}
+
+.ticket-composer {
+ display: grid;
+ gap: 10px;
+ border: 1px solid var(--border);
+ border-radius: 14px;
+ background: color-mix(in srgb, var(--panel) 88%, transparent);
+ padding: 12px;
+ box-shadow: var(--shadow-soft);
+ transition: border-color 0.16s ease;
+}
+
+.ticket-composer:focus-within {
+ border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
+ box-shadow:
+ var(--shadow-soft),
+ 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
+}
+
+.ticket-composer-textarea {
+ min-height: 96px;
+ resize: vertical;
+}
+
+.ticket-composer-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+}
+
+.ticket-composer-row small {
+ color: var(--muted);
+ font-size: 12px;
+ font-weight: 700;
+ font-variant-numeric: tabular-nums;
+ letter-spacing: 0.01em;
+}
+
+.ticket-composer-send {
+ min-width: 132px;
+}
+
+.support-messages-empty {
+ display: grid;
+ min-height: 120px;
+ place-items: center;
+ color: var(--muted);
+ font-size: 13px;
+ text-align: center;
+}
+
+@keyframes ticket-message-enter {
+ from {
+ opacity: 0;
+ transform: translateY(6px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@media (min-width: 1024px) {
+ .support-screen {
+ min-height: calc(100dvh - 74px);
+ grid-template-rows: auto minmax(0, 1fr);
+ align-content: stretch;
+ gap: 12px;
+ }
+
+ .support-ticket-screen {
+ height: calc(100dvh - 68px);
+ min-height: 0;
+ max-height: calc(100dvh - 68px);
+ grid-template-rows: auto minmax(0, 1fr);
+ align-content: stretch;
+ gap: 14px;
+ overflow: hidden;
+ padding-bottom: 0;
+ }
+
+ .support-overview-card,
+ .support-list-card,
+ .support-ticket-card,
+ .support-conversation-card {
+ gap: 14px;
+ }
+
+ .support-list-card {
+ min-height: 0;
+ grid-template-rows: auto minmax(0, 1fr);
+ align-content: stretch;
+ }
+
+ .support-list-card .ticket-list,
+ .support-user-list-skeleton {
+ align-content: start;
+ min-height: 0;
+ height: 100%;
+ overflow: auto;
+ padding-right: 4px;
+ scrollbar-width: thin;
+ }
+
+ .support-list-card .support-empty-state {
+ width: min(100%, 430px);
+ min-height: 220px;
+ height: auto;
+ align-self: center;
+ justify-self: center;
+ }
+
+ .support-heading-row {
+ grid-template-columns: 46px minmax(0, 1fr);
+ }
+
+ .support-heading-icon {
+ width: 46px;
+ height: 46px;
+ }
+
+ .support-new-ticket-button {
+ min-height: 62px;
+ padding: 10px 12px;
+ }
+
+ .support-create-panel-inner {
+ padding: 14px;
+ }
+
+ .support-status-tabs-trigger {
+ flex: 1 1 0;
+ text-align: center;
+ }
+
+ .ticket-card {
+ min-height: 84px;
+ padding: 16px 16px 16px 20px;
+ }
+
+ .ticket-card-title strong {
+ font-size: 15.5px;
+ }
+
+ .support-ticket-detail-header {
+ grid-template-columns: auto minmax(0, 1fr) auto;
+ align-items: center;
+ gap: 14px;
+ margin-bottom: 0;
+ }
+
+ .support-ticket-detail-header .ticket-badges {
+ grid-column: 3;
+ justify-content: flex-end;
+ }
+
+ .support-ticket-screen > .support-ticket-state-card {
+ min-height: calc(100dvh - 74px);
+ }
+
+ .support-conversation-card {
+ height: 100%;
+ min-height: 0;
+ grid-template-rows: minmax(0, 1fr) auto;
+ align-content: stretch;
+ overflow: hidden;
+ }
+
+ .support-conversation-card--loading {
+ grid-template-rows: minmax(0, 1fr);
+ }
+
+ .support-ticket-screen .support-message-scroll {
+ min-height: 0;
+ height: 100%;
+ overflow: auto;
+ padding: 20px;
+ scrollbar-width: thin;
+ }
+
+ .support-ticket-screen .ticket-message-list {
+ min-height: 100%;
+ }
+
+ .support-ticket-screen .support-messages-empty {
+ min-height: 0;
+ height: 100%;
+ }
+
+ .support-ticket-screen .ticket-composer {
+ padding: 14px;
+ }
+
+ .support-ticket-screen .ticket-composer-textarea {
+ min-height: 92px;
+ }
+
+ .ticket-message-row {
+ grid-template-columns: 40px minmax(0, 1fr);
+ }
+
+ .ticket-message-row--outgoing {
+ grid-template-columns: minmax(0, 1fr) 40px;
+ }
+
+ .ticket-message-avatar {
+ width: 40px;
+ height: 40px;
+ }
+}
+
+@media (max-width: 520px) {
+ .support-screen {
+ padding-bottom: calc(var(--bottom-nav-height) + var(--bottom-nav-offset) + 24px);
+ }
+
+ .support-ticket-screen {
+ height: calc(100dvh - max(16px, env(safe-area-inset-top)) - 48px);
+ min-height: 0;
+ grid-template-rows: auto minmax(0, 1fr);
+ align-content: stretch;
+ gap: 10px;
+ overflow: hidden;
+ padding-bottom: calc(
+ var(--bottom-nav-height) + max(var(--bottom-nav-offset), env(safe-area-inset-bottom)) + 12px
+ );
+ }
+
+ .support-ticket-screen > .support-ticket-state-card {
+ min-height: 100%;
+ }
+
+ .support-ticket-screen .support-conversation-card {
+ min-height: 0;
+ grid-template-rows: minmax(0, 1fr) auto;
+ align-content: stretch;
+ overflow: hidden;
+ }
+
+ .support-ticket-screen .support-conversation-card--loading {
+ grid-template-rows: minmax(0, 1fr);
+ }
+
+ .support-new-ticket-button {
+ min-height: 58px;
+ grid-template-columns: 38px minmax(0, 1fr) auto;
+ padding: 9px 10px;
+ }
+
+ .support-new-ticket-icon {
+ width: 38px;
+ height: 38px;
+ }
+
+ .support-create-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .support-message-input {
+ height: 108px;
+ min-height: 108px;
+ }
+
+ .support-status-tabs-list {
+ display: flex;
+ width: 100%;
+ overflow-x: auto;
+ }
+
+ .support-status-tabs-trigger {
+ flex: 0 0 auto;
+ padding-inline: 10px;
+ white-space: nowrap;
+ line-height: 1;
+ }
+
+ .support-empty-state {
+ min-height: 190px;
+ }
+
+ .support-user-ticket-skeleton {
+ grid-template-columns: 1fr;
+ align-items: start;
+ gap: 12px;
+ padding: 14px;
+ }
+
+ .support-user-ticket-skeleton-side {
+ grid-auto-flow: column;
+ justify-content: start;
+ justify-items: start;
+ }
+
+ .ticket-card {
+ grid-template-columns: minmax(0, 1fr) auto;
+ align-items: start;
+ gap: 10px;
+ padding: 14px 14px 14px 18px;
+ }
+
+ .ticket-card-main {
+ gap: 5px;
+ }
+
+ .ticket-card-title strong {
+ display: -webkit-box;
+ overflow: hidden;
+ white-space: normal;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ font-size: 14.5px;
+ }
+
+ .ticket-card-side {
+ align-items: flex-end;
+ gap: 6px;
+ }
+
+ .ticket-card-badges {
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 5px;
+ }
+
+ .support-ticket-detail-header {
+ grid-template-columns: auto minmax(0, 1fr);
+ gap: 8px 10px;
+ }
+
+ .support-ticket-detail-header .ticket-badges {
+ grid-column: 2;
+ justify-content: flex-start;
+ }
+
+ .support-back-button {
+ width: fit-content;
+ }
+
+ .support-ticket-detail-header .ticket-detail-title h1 {
+ font-size: 17px;
+ line-height: 1.18;
+ }
+
+ .support-message-scroll,
+ .support-admin-message-scroll {
+ max-height: none !important;
+ overflow: visible;
+ padding: 12px 10px;
+ }
+
+ .support-ticket-screen .support-message-scroll {
+ min-height: 0;
+ height: 100%;
+ overflow: auto;
+ padding: 10px;
+ }
+
+ .support-ticket-screen .ticket-message-list {
+ min-height: 100%;
+ align-content: end;
+ }
+
+ .support-ticket-screen .support-messages-empty {
+ min-height: 0;
+ height: 100%;
+ }
+
+ .ticket-message-list,
+ .support-admin-messages {
+ gap: 14px;
+ }
+
+ .ticket-message-row {
+ grid-template-columns: 32px minmax(0, 1fr);
+ gap: 8px;
+ }
+
+ .ticket-message-row--outgoing {
+ grid-template-columns: minmax(0, 1fr) 32px;
+ }
+
+ .ticket-message-row--outgoing .ticket-message-avatar {
+ grid-column: 2;
+ }
+
+ .ticket-message-row--outgoing .ticket-message-content {
+ grid-column: 1;
+ justify-self: end;
+ align-items: flex-end;
+ }
+
+ .ticket-message-row--incoming .ticket-message-content {
+ grid-column: 2;
+ justify-self: start;
+ }
+
+ .ticket-message-content {
+ max-width: min(86%, calc(100vw - 80px));
+ }
+
+ .ticket-message-avatar {
+ width: 32px;
+ height: 32px;
+ }
+
+ .ticket-message-avatar .brand-mark {
+ font-size: 18px;
+ }
+
+ .ticket-message-bubble {
+ width: fit-content;
+ border-radius: 14px 14px 14px 4px;
+ padding: 9px 11px;
+ }
+
+ .ticket-message-row--outgoing .ticket-message-bubble {
+ border-radius: 14px 14px 4px 14px;
+ }
+
+ .ticket-message-bubble p {
+ font-size: 13.5px;
+ line-height: 1.45;
+ }
+
+ .ticket-composer-textarea {
+ min-height: 76px;
+ }
+
+ .support-ticket-screen .ticket-composer {
+ gap: 6px;
+ padding: 9px 10px;
+ }
+
+ .support-ticket-screen .ticket-composer-textarea {
+ height: 56px;
+ min-height: 56px;
+ }
+
+ .ticket-composer-row {
+ align-items: center;
+ flex-direction: row;
+ }
+
+ .ticket-composer-send {
+ width: auto;
+ min-width: 108px;
+ padding-inline: 14px;
+ }
+}
+
+@media (max-width: 520px) {
+ .support-new-ticket-button strong,
+ .ticket-card-title strong,
+ .ticket-detail-title h1 {
+ letter-spacing: 0;
+ }
+}
diff --git a/frontend/src/styles/webapp.css b/frontend/src/styles/webapp.css
index 3427838..bb5e21f 100644
--- a/frontend/src/styles/webapp.css
+++ b/frontend/src/styles/webapp.css
@@ -1466,20 +1466,6 @@ a {
position: relative;
}
-.attention-dot {
- position: absolute;
- top: 0;
- right: 0;
- width: 13px;
- height: 13px;
- transform: translate(50%, -50%);
- border-radius: 999px;
- background: #ff4b4b;
- box-shadow: 0 0 0 0 rgba(255, 75, 75, 0.75);
- animation: attention-pulse 1.6s ease-out infinite;
- pointer-events: none;
-}
-
.nav-attention-dot {
top: 6px;
right: 10px;
@@ -1490,20 +1476,6 @@ a {
padding-right: 6px;
}
-@keyframes attention-pulse {
- 0% {
- box-shadow: 0 0 0 0 rgba(255, 75, 75, 0.75);
- }
-
- 70% {
- box-shadow: 0 0 0 8px rgba(255, 75, 75, 0);
- }
-
- 100% {
- box-shadow: 0 0 0 0 rgba(255, 75, 75, 0);
- }
-}
-
.bottom-nav {
position: fixed !important;
left: var(--bottom-nav-left);
@@ -1514,9 +1486,11 @@ a {
bottom: max(var(--bottom-nav-offset), env(safe-area-inset-bottom));
z-index: 80;
display: grid;
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: repeat(var(--bottom-nav-visible-items, 3), minmax(0, 1fr));
+ grid-auto-flow: column;
gap: 2px;
min-height: 64px;
+ overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--nav-bg);
@@ -1525,7 +1499,7 @@ a {
}
.bottom-nav-devices {
- grid-template-columns: repeat(4, 1fr);
+ grid-template-columns: repeat(var(--bottom-nav-visible-items, 4), minmax(0, 1fr));
}
.bottom-nav.static {
@@ -1534,6 +1508,7 @@ a {
.bottom-nav button {
display: grid;
+ min-width: 0;
place-items: center;
align-content: center;
gap: 4px;
@@ -1542,16 +1517,77 @@ a {
color: var(--muted);
font-size: 10px;
font-weight: 800;
+ overflow: hidden;
+ padding: 6px 2px;
}
.bottom-nav button.active {
color: var(--accent);
}
+.bottom-nav .bottom-nav-label {
+ display: block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ line-height: 1.1;
+}
+
.rail-admin-entry {
display: none !important;
}
+@media (max-width: 380px) {
+ .bottom-nav.bottom-nav-many {
+ min-height: 58px;
+ }
+
+ .bottom-nav.bottom-nav-many button {
+ gap: 0;
+ padding: 0 2px;
+ }
+
+ .bottom-nav.bottom-nav-many .bottom-nav-label {
+ display: none;
+ }
+
+ .bottom-nav.bottom-nav-many .nav-attention-dot {
+ top: 8px;
+ right: calc(50% - 18px);
+ }
+
+ .bottom-nav.bottom-nav-many .nav-badge-floating {
+ top: 6px;
+ right: calc(50% - 24px);
+ }
+}
+
+@media (max-width: 360px) {
+ .bottom-nav {
+ min-height: 56px;
+ }
+
+ .bottom-nav button {
+ gap: 0;
+ padding: 0 2px;
+ }
+
+ .bottom-nav .bottom-nav-label {
+ display: none;
+ }
+
+ .bottom-nav .nav-attention-dot {
+ top: 8px;
+ right: calc(50% - 18px);
+ }
+
+ .bottom-nav .nav-badge-floating {
+ top: 6px;
+ right: calc(50% - 24px);
+ }
+}
+
.home-layout {
display: grid;
min-height: calc(100dvh - 34px);
@@ -1975,6 +2011,10 @@ a {
font-size: 9px;
}
+.preview-phone .bottom-nav .bottom-nav-label {
+ font-size: 9px;
+}
+
.preview-phone .card {
padding: 12px;
}
@@ -2247,10 +2287,14 @@ a {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: none !important;
+ grid-auto-flow: row !important;
grid-auto-rows: auto !important;
+ grid-auto-columns: 1fr !important;
align-content: start !important;
gap: 2px !important;
padding: 28px 14px !important;
+ overflow-x: hidden !important;
+ overflow-y: auto !important;
border: 0 !important;
border-right: 1px solid var(--border) !important;
border-radius: 0 !important;
@@ -2271,7 +2315,7 @@ a {
align-items: center !important;
justify-items: start !important;
gap: 12px !important;
- padding: 12px 14px !important;
+ padding: 12px 42px 12px 14px !important;
border-radius: 10px !important;
text-align: left !important;
font-size: 13px !important;
@@ -2281,6 +2325,7 @@ a {
background 0.12s ease,
color 0.12s ease,
border-color 0.12s ease;
+ width: 100%;
}
.bottom-nav button > svg {
@@ -2288,7 +2333,7 @@ a {
height: 20px;
}
- .bottom-nav button > span {
+ .bottom-nav .bottom-nav-label {
text-align: left !important;
font-size: 13px !important;
font-weight: 600;
@@ -2305,9 +2350,11 @@ a {
color: var(--text);
}
- .bottom-nav .nav-attention-dot {
- top: 14px;
+ .bottom-nav .nav-attention-dot,
+ .bottom-nav .nav-badge-floating {
+ top: 50%;
right: 14px;
+ transform: translateY(-50%);
}
.bottom-nav .rail-admin-entry {
@@ -2393,6 +2440,7 @@ a {
@media (min-width: 1024px) {
.bottom-nav .rail-brand {
display: flex;
+ width: 100%;
align-items: center;
gap: 12px;
padding: 4px 12px 18px;
diff --git a/frontend/src/webapp/BottomNav.svelte b/frontend/src/webapp/BottomNav.svelte
index 262d2e3..de0ea28 100644
--- a/frontend/src/webapp/BottomNav.svelte
+++ b/frontend/src/webapp/BottomNav.svelte
@@ -2,10 +2,12 @@
import {
Gift,
Home,
+ LifeBuoy,
Settings as SettingsIcon,
Shield,
Smartphone,
} from "$components/ui/icons.js";
+ import { AttentionDot } from "$components/ui/index.js";
import BrandMark from "$lib/webapp/BrandMark.svelte";
@@ -13,51 +15,107 @@
export let brand = {};
export let brandTitle = "";
export let devicesEnabled = false;
+ export let supportEnabled = true;
+ export let supportUnreadCount = 0;
+ export let supportUnreadLoading = false;
+ export let supportUnreadLoaded = false;
export let hasUnlinkedIdentity = false;
export let isAdmin = false;
export let onAdmin = () => {};
export let onDevices = () => {};
export let onHome = () => {};
export let onInvite = () => {};
+ export let onSupport = () => {};
export let onSettings = () => {};
export let t = (key) => key;
+
+ $: visibleNavItems = 3 + (devicesEnabled ? 1 : 0) + (supportEnabled ? 1 : 0);
+ $: adminLabel = t("admin_nav_title", {}, "Админ-панель");
-