:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17202a;
  background: #f7f8f6;
  --portal-sidebar: #121c25;
  --portal-sidebar-soft: #1b2a35;
  --portal-green: #16834b;
  --portal-green-dark: #0f693c;
  --portal-green-soft: #e6f4eb;
  --portal-blue: #3779da;
  --portal-blue-soft: #eaf1fc;
  --portal-gold: #eea312;
  --portal-gold-soft: #fff3dd;
  --portal-red: #d94444;
  --portal-red-soft: #fdeaea;
  --portal-line: #dfe4e2;
  --portal-muted: #69747d;
  --portal-card: #fff;
  --portal-shadow: 0 1px 3px rgba(20, 33, 42, .05);
}

* { scrollbar-width: thin; scrollbar-color: #c8d0cc transparent; }
body { min-width: 320px; background: #f7f8f6; color: #17202a; -webkit-font-smoothing: antialiased; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline: 3px solid rgba(22,131,75,.22); outline-offset: 1px; }
button,a,input,textarea,select { transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease; }
button:active { transform: none; }

/* Авторизация в той же визуальной системе, что и CRM */
.login-shell { min-height: 100vh; padding: 24px; background: #edf1ef; }
.login-shell::before,.auth-intro { display: none; }
.auth-layout { display: block; width: min(100%,430px); min-height: 0; margin: auto; border: 1px solid var(--portal-line); border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(20,33,42,.08); overflow: hidden; }
.login-card { width: 100%; padding: 34px 36px 36px; border-radius: 0; box-shadow: none; }
.auth-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--portal-line); }
.auth-monogram { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 7px; background: var(--portal-sidebar); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.login-brand { color: #17202a; font-family: Georgia,serif; font-size: 19px; }
.login-brand b { color: #f7b321; }
.auth-kicker { display: block; margin: 0 0 8px; color: var(--portal-green); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.login-card h1 { margin: 0 0 7px; color: #17202a; font-size: 27px; line-height: 1.15; letter-spacing: -.03em; }
.login-card .auth-lead,.application-success>p { margin: 0 0 25px; color: var(--portal-muted); font-size: 12px; line-height: 1.5; }
.login-card form,.application-form { display: grid; gap: 14px; }
.login-card label,.application-form label { display: grid; gap: 6px; color: #44515a; font-size: 11px; font-weight: 700; }
.login-card input,.login-card textarea,.application-form input,.application-form textarea,.edit-grid input,.edit-grid select { min-height: 40px; padding: 8px 11px; border: 1px solid #d6ddda; border-radius: 6px; background: #fff; color: #17202a; font-size: 12px; outline: 0; }
.login-card input:focus,.application-form input:focus,.application-form textarea:focus,.edit-grid input:focus,.edit-grid select:focus { border-color: var(--portal-green); box-shadow: none; }
.auth-submit,.secondary-auth,.application-actions .primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 6px; }
.auth-submit svg,.secondary-auth svg,.application-actions .primary svg { width: 15px; height: 15px; }
.primary { border: 1px solid var(--portal-green-dark); border-radius: 6px; background: linear-gradient(180deg,#1c9257,#137a46); color: #fff; box-shadow: 0 2px 5px rgba(18,117,67,.2); }
.primary:hover { border-color: var(--portal-green-dark); background: var(--portal-green-dark); box-shadow: 0 3px 9px rgba(18,117,67,.2); }
.primary:disabled { cursor: not-allowed; opacity: .55; }
.auth-divider { margin: 19px 0 12px; color: #87928c; font-size: 9px; }
.secondary-auth { width: 100%; border: 1px solid var(--portal-line); background: #fff; color: var(--portal-green-dark); font-size: 12px; font-weight: 700; }
.secondary-auth:hover { border-color: #b9c3bf; background: #fbfcfb; }
.auth-help { margin: 10px 0 0!important; color: #87928c!important; font-size: 9px!important; line-height: 1.45!important; text-align: center; }
.form-message:empty { min-height: 0; }

.application-shell { width: min(100%,780px); margin: auto; padding: 28px 30px 30px; border: 1px solid var(--portal-line); border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(20,33,42,.08); }
.auth-back { display: inline-flex; align-items: center; gap: 5px; height: 32px!important; margin: -4px 0 14px; padding: 0!important; border: 0; background: transparent; color: var(--portal-muted); font-size: 10px; }
.auth-back:hover { color: var(--portal-green-dark); }
.auth-back svg { width: 14px; height: 14px; }
.application-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding-bottom: 17px; border-bottom: 1px solid var(--portal-line); }
.application-heading h1 { margin: 0 0 5px; font-size: 27px; letter-spacing: -.03em; }
.application-heading p { margin: 0; color: var(--portal-muted); font-size: 11px; }
.application-step { display: flex; align-items: center; gap: 7px; color: var(--portal-muted); white-space: nowrap; }
.application-step span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--portal-green-soft); color: var(--portal-green-dark); font-size: 10px; font-weight: 800; }
.application-step small { font-size: 9px; }
.application-form { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 16px; }
.application-form textarea { min-height: 92px; }
.application-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 3px; padding-top: 15px; border-top: 1px solid var(--portal-line); }
.application-actions>p { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--portal-muted); font-size: 9px; }
.application-actions>p svg { width: 14px; height: 14px; color: var(--portal-green); }
.application-success { text-align: left; }
.application-success .success-mark { width: 46px; height: 46px; margin: 0 0 19px; border-radius: 50%; background: var(--portal-green-soft); color: var(--portal-green); }
.application-success .success-mark svg { width: 22px; height: 22px; }

/* Основной каркас */
.sidebar { width: 240px; background: linear-gradient(180deg,#101922,#16232d); color: #edf2f0; box-shadow: 3px 0 14px rgba(0,0,0,.05); }
.brand { height: 62px; padding: 0 20px; border-bottom-color: rgba(255,255,255,.12); font-size: 20px; font-weight: 300; letter-spacing: .04em; }
.side-caption { padding: 22px 20px 9px; color: #95a2a8; font-size: 9px; font-weight: 700; letter-spacing: .09em; }
.sidebar nav { display: grid; gap: 3px; padding: 0 12px; }
.side-link { min-height: 42px; gap: 14px; padding: 0 14px; border: 0; border-left: 0; border-radius: 7px; background: transparent; color: #e8edeb; font-size: 13px; }
.side-link:hover { background: rgba(255,255,255,.06); }
.side-link.active { border-left-color: transparent; background: linear-gradient(90deg,#1d6a4b,#1a5841); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.side-link.active .nav-icon { color: #a8dec3; }
.nav-icon,.nav-icon svg { width: 18px; height: 18px; }
.collapse { height: 50px; margin: auto 0 0; padding: 0 24px; border: 0; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0; background: transparent; color: #a9b3b7; font-size: 11px; }
.main { background: #f7f8f6; }
.topbar { height: 62px; padding: 0 28px; border-bottom: 1px solid var(--portal-line); background: rgba(255,255,255,.94); box-shadow: none; }
.profile { min-width: 220px; padding: 5px 7px; border-radius: 6px; }
.profile:hover { background: #f7f9f8; }
.avatar { width: 34px; height: 34px; background: #e9efec; color: #1d6044; font-size: 11px; }
.profile-chevron { display: grid; place-items: center; margin-left: auto; color: #7d8a84; }
.profile-chevron svg { width: 14px; height: 14px; }
.profile-menu { top: 55px; right: 28px; width: 250px; padding: 6px; border-color: var(--portal-line); border-radius: 7px; box-shadow: 0 10px 28px rgba(20,33,42,.08); }
.profile-menu>div { padding: 9px 10px 11px; border-bottom: 1px solid var(--portal-line); }
.profile-menu>div b,.profile-menu>div small { display: block; overflow: hidden; text-overflow: ellipsis; }
.profile-menu>div b { font-size: 11px; }
.profile-menu>div small { margin-top: 3px; color: var(--portal-muted); font-size: 9px; }
.profile-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 4px; padding: 9px 10px; border-radius: 5px; color: #4c5b53; font-size: 10px; }
.profile-menu button:hover { background: #f7f9f8; color: #a83737; }
.profile-menu button svg { width: 14px; height: 14px; }
.content { max-width: 1800px; margin: 0 auto; padding: 22px 28px 34px; background: #f7f8f6; }
.page-title { margin: 0 0 18px; }
.page-title h1 { margin: 0 0 5px; color: #17202a; font-size: 28px; line-height: 1.15; letter-spacing: -.03em; }
.page-title p { margin: 0; color: var(--portal-muted); font-size: 12px; line-height: 1.45; }
.new-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 168px; min-height: 38px; padding: 0 14px; border-radius: 6px; font-size: 12px; }
.new-button-icon,.new-button-icon svg { width: 15px; height: 15px; }

/* Обращения: рабочий master-detail, без декоративных карточек */
.workspace { grid-template-columns: clamp(330px,28vw,430px) minmax(520px,1fr) 300px; gap: 12px; height: calc(100dvh - 166px); min-height: 600px; }
.list-panel,.chat-panel,.detail-panel,.simple-card,.profile-v2-section,.profile-v2-aside>section { border: 1px solid var(--portal-line); border-radius: 8px; background: #fff; box-shadow: var(--portal-shadow); }
.ticket-list-head { position: relative; gap: 8px; padding: 11px; border-bottom: 1px solid var(--portal-line); }
.list-search { height: 38px; padding: 0 10px; border: 1px solid var(--portal-line); border-radius: 6px; background: #fff; }
.list-search:focus-within { border-color: var(--portal-green); box-shadow: none; }
.list-search svg { width: 16px; height: 16px; color: var(--portal-muted); }
.filter-btn { width: 38px; height: 38px; padding: 0; border: 1px solid var(--portal-line); border-radius: 6px; background: #fff; }
.filter-btn:hover { border-color: #b9c3bf; background: #fbfcfb; }
.filter-btn.has-filter { border-color: #a9cdb7; background: var(--portal-green-soft); color: var(--portal-green-dark); }
.filter-popover { border-color: var(--portal-line); border-radius: 7px; box-shadow: 0 10px 28px rgba(20,33,42,.08); }
.ticket-rows { padding: 0; }
.ticket-row { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; min-height: 88px; padding: 12px 14px; border: 0; border-bottom: 1px solid #e8ebe9; border-radius: 0; background: #fff; }
.ticket-row:last-child { border-bottom: 0; }
.ticket-row:hover { background: #f8fbf9; }
.ticket-row.selected { padding-left: 11px; border-left: 3px solid var(--portal-green); background: #f3f9f5; }
.ticket-row-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; background: #eef2f0; color: #53645b; }
.ticket-row.selected .ticket-row-icon { background: var(--portal-green-soft); color: var(--portal-green); }
.ticket-row-icon svg { width: 15px; height: 15px; }
.ticket-row-content { min-width: 0; }
.ticket-row-title { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }
.ticket-row-title b { overflow: hidden; color: #26332d; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ticket-row p { margin: 6px 0 5px; overflow: hidden; color: #65716b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ticket-row-meta { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; color: #89938e; font-size: 9px; }
.ticket-row-meta>span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-count { display: inline-flex; align-items: center; gap: 3px; }
.message-count svg { width: 12px; height: 12px; }
.badge { padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.badge.open,.badge.waiting { background: var(--portal-blue-soft); color: #2767bd; }
.badge.work { background: var(--portal-gold-soft); color: #8a600d; }
.badge.resolved { background: var(--portal-green-soft); color: var(--portal-green-dark); }
.chat-head { min-height: 65px; justify-content: flex-start; gap: 10px; padding: 11px 15px; border-bottom-color: var(--portal-line); }
.chat-title-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; background: var(--portal-green-soft); color: var(--portal-green); flex: none; }
.chat-title-icon svg { width: 16px; height: 16px; }
.chat-title-copy { min-width: 0; }
.chat-title-copy h2 { margin: 0 0 4px; overflow: hidden; color: #26332d; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.ticket-number { color: var(--portal-muted); font-size: 9px; }
.header-copy { color: var(--portal-green-dark); }
.conversation-tabs { min-height: 44px; padding: 0 13px; border-bottom: 1px solid var(--portal-line); background: #fbfcfb; }
.conversation-tabs button { min-height: 43px; color: var(--portal-muted); font-size: 10px; }
.conversation-tabs button.active { border-color: var(--portal-green); color: var(--portal-green-dark); }
.conversation-tabs button small { background: var(--portal-green-soft); color: var(--portal-green-dark); }
.messages { padding: 18px; background: #fafbfa; }
.message { align-items: flex-start; margin-bottom: 18px; }
.message.own { flex-direction: row-reverse; }
.message-avatar { width: 34px; height: 34px; background: #e9efec; color: #1d6044; font-size: 9px; }
.message.staff .message-avatar { background: var(--portal-green-soft); color: var(--portal-green-dark); }
.message-block { display: grid; min-width: 0; justify-items: start; }
.message.own .message-block { justify-items: end; }
.message-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; max-width: 100%; font-size: 9px; }
.message.own .message-meta { justify-content: flex-end; text-align: right; }
.message-meta span,.message-meta small { color: var(--portal-muted); }
.bubble { width: fit-content; max-width: min(82%,680px); padding: 10px 12px; border: 1px solid var(--portal-line); border-radius: 7px; background: #fff; box-shadow: var(--portal-shadow); font-size: 11px; line-height: 1.5; }
.message.own .bubble { margin-left: 0; border-color: #cfe4d7; background: #f2f8f4; }
.composer { padding: 11px 13px; border-top-color: var(--portal-line); background: #fff; }
.composer textarea { min-height: 40px; padding: 8px 10px; border: 1px solid #d6ddda; border-radius: 6px; background: #fff; font-size: 11px; outline: 0; }
.composer textarea:focus { border-color: var(--portal-green); }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.composer-actions>div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.upload-label { display: inline-flex; align-items: center; gap: 5px; color: var(--portal-muted); font-size: 9px; }
.upload-label:hover { color: var(--portal-green-dark); }
.upload-label svg { width: 14px; height: 14px; }
.composer .primary { min-height: 34px; padding: 0 12px; font-size: 10px; }
.detail-panel { padding: 16px; }
.detail-panel h3 { margin-bottom: 13px; color: #26332d; font-size: 13px; }
.detail-property { border-radius: 6px; }
.property-icon { border-radius: 7px; }
.detail-divider { border-top-color: var(--portal-line); }
.resource-heading-icon,.resource-icon { border-radius: 7px; background: var(--portal-green-soft); color: var(--portal-green); }
.resource-card,.order-summary { border-color: var(--portal-line); border-radius: 7px; box-shadow: none; }
.resource-card:hover { border-color: #b9c3bf; background: #fbfcfb; }
.toast { border-radius: 6px; background: #23332b; box-shadow: 0 10px 28px rgba(20,33,42,.16); }

/* Профиль организации */
.company-profile-v2 { max-width: 1240px; gap: 16px; }
.profile-v2-head { margin-bottom: 2px; }
.profile-v2-head h1 { color: #17202a; font-size: 28px; letter-spacing: -.03em; }
.profile-v2-head p { color: var(--portal-muted); font-size: 12px; }
.profile-v2-head>button,.profile-v2-note>button,.save-company { min-height: 38px; padding: 0 14px; border: 1px solid var(--portal-green-dark)!important; border-radius: 6px!important; background: linear-gradient(180deg,#1c9257,#137a46)!important; color: #fff!important; box-shadow: 0 2px 5px rgba(18,117,67,.2)!important; font-size: 11px; font-weight: 700; }
.profile-v2-head>button:hover,.profile-v2-note>button:hover,.save-company:hover { background: var(--portal-green-dark)!important; }
.profile-v2-company { min-height: 84px; padding: 15px 17px; border: 1px solid var(--portal-line); border-radius: 8px; box-shadow: var(--portal-shadow); }
.profile-v2-logo { width: 46px; height: 46px; border: 1px solid #cfe4d7!important; border-radius: 7px; background: var(--portal-green-soft)!important; color: var(--portal-green-dark)!important; }
.profile-v2-company h2 { font-size: 17px; }
.company-photo-frame { display: grid; place-items: center; overflow: hidden; width: 54px; height: 54px; flex: none; border: 1px solid #dce2df; border-radius: 7px; background: #f3f5f4; color: #7d8983; }
.company-photo-frame.large { width: 86px; height: 86px; }
.company-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.company-photo-empty { display: grid; place-items: center; gap: 2px; width: 100%; height: 100%; }
.company-photo-empty svg { width: 19px; height: 19px; }
.company-photo-empty small { font-size: 8px; font-weight: 600; line-height: 1; }
.profile-v2-layout { grid-template-columns: minmax(0,1.45fr) 340px; gap: 14px; }
.profile-v2-main,.profile-v2-aside { gap: 14px; }
.profile-v2-section,.profile-v2-aside>section { border-radius: 8px; }
.profile-v2-section>header { padding: 14px 16px; border-bottom-color: var(--portal-line); background: #fbfcfb; }
.profile-v2-section h3,.profile-v2-aside h3 { font-size: 12px; }
.profile-v2-rows { padding: 0 16px; }
.profile-v2-rows>div { padding: 12px 0; border-bottom-color: #e8ebe9; }
.profile-v2-rows dt { color: var(--portal-muted); font-size: 9px; }
.profile-v2-rows dd { color: #26332d; font-size: 10px; }
.profile-v2-aside>section { padding: 14px; }
.profile-v2-aside>section>header { border-bottom-color: var(--portal-line); }
.profile-v2-note { background: #fbfcfb!important; }
.company-edit-form { gap: 12px; }
.company-photo-editor { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--portal-line); border-radius: 8px; background: #fff; box-shadow: var(--portal-shadow); }
.company-photo-editor-copy { display: grid; justify-items: start; gap: 5px; }
.company-photo-editor-copy>strong { color: #26332d; font-size: 12px; }
.company-photo-editor-copy>p { margin: 0 0 3px; color: var(--portal-muted); font-size: 10px; line-height: 1.45; }
.company-photo-editor-copy>small { color: var(--portal-muted); font-size: 9px; }
.company-photo-editor-copy>small.error { color: #b23b3b; }
.company-photo-upload { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid #cbd5d0; border-radius: 6px; background: #fff; color: #31483c; font-size: 10px; font-weight: 700; cursor: pointer; }
.company-photo-upload:hover { border-color: var(--portal-green); color: var(--portal-green-dark); }
.company-photo-upload.loading { cursor: wait; opacity: .65; }
.company-photo-upload svg { width: 14px; height: 14px; }
.company-edit-form fieldset { padding: 16px; border: 1px solid var(--portal-line); border-radius: 8px; background: #fff; box-shadow: var(--portal-shadow); }
.company-edit-form legend { font-size: 12px; }
.company-edit-actions { background: rgba(247,248,246,.94); }

/* Модальные окна */
.modal-backdrop { background: rgba(18,28,37,.52); backdrop-filter: blur(2px); }
.new-modal { border: 1px solid var(--portal-line); border-radius: 8px; box-shadow: 0 18px 50px rgba(20,33,42,.2); }
.modal-head { align-items: flex-start; }
.modal-head h2 { font-size: 18px; }
.modal-head p { margin: 5px 0 0; color: var(--portal-muted); font-size: 10px; line-height: 1.45; }
.modal-head>button { width: 32px; height: 32px; border-radius: 6px; color: var(--portal-muted); }
.partner-modal-section { border-color: var(--portal-line); border-radius: 7px; background: #fbfcfb; }
.partner-modal-title>span { border-radius: 6px; background: var(--portal-green-soft); color: var(--portal-green-dark); }
.modal-actions button:first-child { border-color: var(--portal-line); border-radius: 6px; }
.document-number,.download { display: inline-flex; align-items: center; gap: 6px; }
.document-number svg,.download svg { width: 15px; height: 15px; }

@media(max-width:1350px){.workspace{grid-template-columns:minmax(310px,36%) minmax(440px,1fr)}.detail-panel{display:none}}
@media(max-width:1000px){.profile-v2-layout{grid-template-columns:1fr}}
@media(max-width:900px){.sidebar{width:72px}.topbar{padding-inline:18px}.content{padding:20px 18px 28px}.workspace{grid-template-columns:minmax(270px,38%) minmax(390px,1fr)}}
@media(max-width:700px){
  .login-shell{padding:12px}.login-card{padding:28px 22px}.application-shell{padding:24px 20px}.application-heading{align-items:flex-start}.application-step{display:none}.application-form{grid-template-columns:1fr}.application-wide{grid-column:auto}.application-actions{align-items:stretch;flex-direction:column}
  #app{display:block;padding-bottom:62px}body:has(.login-shell) #app{padding-bottom:0}.sidebar{position:fixed;z-index:30;right:0;bottom:0;left:0;display:flex;flex-direction:row;width:100%;height:62px;border-top:1px solid rgba(255,255,255,.1);background:rgba(18,28,37,.98);box-shadow:0 -3px 14px rgba(0,0,0,.08)}.sidebar .brand,.sidebar .side-caption,.sidebar .collapse{display:none!important}.sidebar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;height:100%;padding:5px 10px}.side-link,.side-collapsed .side-link{display:flex;flex-direction:column;justify-content:center;gap:2px;width:100%;min-height:0;margin:0;padding:4px;font-size:9px}.side-link>span:last-child,.side-collapsed .side-link>span:last-child{display:block;max-width:none;margin:0;opacity:1}.main{width:100%}.topbar{height:58px;padding:0 12px}.profile{min-width:0}.profile>span:nth-child(2),.profile-chevron{display:none}.profile-menu{top:51px;right:10px}.content{padding:17px 10px 24px}.page-title{align-items:stretch;flex-direction:column}.page-title h1,.profile-v2-head h1{font-size:23px}.new-button{width:100%}.workspace{display:grid;grid-template-columns:1fr;height:auto;min-height:0}.list-panel{height:300px;margin:0}.chat-panel{height:610px}.detail-panel{display:none}.conversation-tabs{overflow-x:auto}.conversation-tabs button{flex:0 0 auto}.composer-actions{align-items:stretch;flex-direction:column}.composer-actions>div{justify-content:space-between}.composer .primary{width:100%}.profile-v2-company{align-items:flex-start}.profile-v2-rows>div{grid-template-columns:105px minmax(0,1fr)}.company-photo-editor{grid-template-columns:1fr;justify-items:start}
}
@media(max-width:430px){.login-card{padding:25px 19px}.ticket-row{padding-inline:11px}.ticket-row.selected{padding-left:8px}.messages{padding-inline:11px}.upload-label{font-size:0}.upload-label svg{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Экран обращений — геометрия и визуальная система эталона 1672×941 */
body { background: #f5f8fb; color: #12233b; }
.main { background: #f5f8fb; }
.sidebar { width: 230px; background: linear-gradient(180deg,#112536 0%,#102332 100%); box-shadow: 2px 0 12px rgba(7,25,40,.08); }
.brand { height: 68px; padding: 0 24px; font-size: 20px; letter-spacing: .02em; }
.side-caption { padding: 28px 24px 11px; color: #8fa2b0; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.sidebar nav { gap: 3px; padding: 0 11px; }
.side-link { min-height: 51px; gap: 16px; padding: 0 18px; border-radius: 9px; color: #dce6ec; font-size: 14px; }
.side-link.active { background: linear-gradient(100deg,#177b58,#17684e); box-shadow: 0 5px 18px rgba(2,51,35,.2); }
.side-link.active .nav-icon { color: #b9efd5; }
.nav-icon,.nav-icon svg { width: 20px; height: 20px; }
.sidebar-footer { display: grid; gap: 2px; margin-top: auto; padding: 0 20px 31px; }
.sidebar-footer::before { content: ""; height: 1px; margin: 0 0 9px; background: rgba(216,231,240,.14); }
.sidebar-footer .collapse,.sidebar-action { display: flex!important; align-items: center; gap: 15px; width: 100%; height: 47px; margin: 0; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: #c3d0d9; font-size: 13px; text-align: left; white-space: nowrap; }
.sidebar-footer .collapse { order: 0; }
.sidebar-action { order: 1; }
.sidebar-footer .collapse:hover,.sidebar-action:hover { border: 0; background: rgba(255,255,255,.055); color: #fff; }
.sidebar-action svg,.collapse-icon svg { width: 20px; height: 20px; flex: none; }
.topbar { height: 68px; gap: 19px; padding: 0 28px; border-bottom: 1px solid #dde6ed; background: #fff; box-shadow: 0 2px 11px rgba(19,47,70,.05); }
.topbar-bell { position: relative; display: grid; place-items: center; width: 30px; height: 38px; padding: 0; border: 0; background: transparent; color: #3c536a; }
.topbar-bell svg { width: 21px; height: 21px; }
.topbar-bell i { position: absolute; top: 5px; right: 2px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #15915b; }
.topbar-divider { width: 1px; height: 40px; background: #e3e9ee; }
.profile { min-width: 190px; margin-left: 0; padding: 4px 3px; border-radius: 8px; }
.profile .avatar { width: 46px; height: 46px; background: #e5f5ed; color: #087d4d; font-size: 13px; }
.profile b { color: #162238; font-size: 14px; }
.profile small { margin-top: 4px; color: #60738b; font-size: 13px; }
.profile-chevron { margin-left: 13px; color: #243a50; }
.content { width: 100%; max-width: 1740px; margin-inline: auto; padding: 20px 26px 27px; background: #f5f8fb; }
.page-title { min-height: 68px; margin: 0 0 20px; }
.page-title h1 { margin: 0 0 5px; color: #112139; font-size: 36px; line-height: 1.05; letter-spacing: -.04em; }
.page-title p { color: #5d718d; font-size: 15px; line-height: 1.4; }
.new-button { min-width: 209px; min-height: 53px; gap: 11px; padding: 0 21px; border-radius: 8px; font-size: 14px; }
.new-button-icon,.new-button-icon svg { width: 19px; height: 19px; }
.workspace { grid-template-columns: 402px minmax(0,1fr) 344px; gap: 12px; height: calc(100dvh - 203px); min-height: 620px; }
.list-panel,.chat-panel,.detail-panel { border-color: #dce5ec; border-radius: 10px; box-shadow: 0 2px 9px rgba(21,48,70,.055); }
.ticket-list-head { gap: 14px; padding: 16px; }
.list-search { height: 48px; padding: 0 14px; border-color: #d7e1e9; border-radius: 8px; }
.list-search input { color: #21344e; font-size: 14px; }
.list-search svg { width: 19px; height: 19px; color: #506985; }
.filter-btn { width: 48px; height: 48px; border-color: #d7e1e9; border-radius: 8px; color: #35516e; }
.filter-btn svg { width: 20px; height: 20px; }
.ticket-row { grid-template-columns: 48px minmax(0,1fr); gap: 17px; min-height: 112px; padding: 16px 17px 15px 22px; border-bottom-color: #e6edf2; }
.ticket-row.selected { min-height: 107px; padding-left: 17px; border: 0; border-left: 4px solid #11945a; border-radius: 0 10px 10px 0; background: linear-gradient(90deg,#eefaf5,#f1f8f5); box-shadow: none; }
.ticket-row.selected::before { display: none; }
.ticket-row-icon { width: 48px; height: 48px; border-radius: 10px; background: #f0f4f6; color: #40566f; }
.ticket-row.selected .ticket-row-icon { background: #e3f6ed; color: #008c54; }
.ticket-row-icon svg { width: 20px; height: 20px; }
.ticket-row-content { display: grid; grid-template-rows: auto auto auto; align-content: center; min-width: 0; }
.ticket-row-title { gap: 10px; }
.ticket-row-title b { color: #17233a; font-size: 16px; }
.ticket-row p { margin: 7px 0 8px; color: #5b6e86; font-size: 14px; }
.ticket-row-meta { gap: 8px; color: #657b95; font-size: 12px; font-variant-numeric: tabular-nums; }
.message-count { gap: 5px; font-size: 12px; }
.message-count svg { width: 16px; height: 16px; }
.badge { padding: 6px 12px; font-size: 11px; }
.chat-head { min-height: 92px; gap: 17px; padding: 16px 20px; }
.chat-title-icon { width: 52px; height: 52px; border-radius: 10px; background: #dff5eb; color: #008d55; }
.chat-title-icon svg { width: 22px; height: 22px; }
.chat-title-copy { display: grid; align-content: center; flex: 1; }
.chat-title-copy h2 { margin-bottom: 8px; color: #111f35; font-size: 18px; }
.ticket-number { display: flex; align-items: center; gap: 9px; color: #627a96; font-size: 12px; font-variant-numeric: tabular-nums; }
.header-copy { color: #506986; }
.header-copy svg { width: 17px; height: 17px; }
.chat-more { display: grid; place-items: center; width: 36px; height: 40px; padding: 0; border: 0; background: transparent; color: #18354f; }
.chat-more svg { width: 21px; height: 21px; }
.conversation-tabs { min-height: 59px; gap: 17px; padding: 0 18px; background: #fff; }
.conversation-tabs button { min-width: 103px; min-height: 58px; padding: 0 10px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: #52657d; font-size: 14px; }
.conversation-tabs button:hover { background: transparent; }
.conversation-tabs button.active { border-color: #07894e; background: transparent; color: #087d49; box-shadow: none; }
.conversation-tabs svg { width: 20px; height: 20px; }
.conversation-tabs button small { min-width: 23px; height: 23px; background: #ddf3e8; color: #087f4c; font-size: 11px; }
.messages { padding: 25px 20px; background: #fff; }
.message-day { display: flex; align-items: center; gap: 15px; margin: 0 0 22px; color: #60748c; font-size: 12px; }
.message-day::before,.message-day::after { content: ""; height: 1px; flex: 1; background: #e0e7ec; }
.message-day span { padding: 8px 17px; border-radius: 20px; background: #f2f5f8; white-space: nowrap; }
.message { gap: 16px; margin-bottom: 20px; }
.message-avatar { width: 46px; height: 46px; background: #e5f5ed; color: #087f4d; font-size: 14px; }
.message-meta { gap: 5px 10px; margin: 3px 0 8px; color: #16243a; font-size: 12px; font-variant-numeric: tabular-nums; }
.message-meta b { font-size: 15px; }
.message-meta span,.message-meta small { color: #637793; }
.bubble { max-width: min(82%,680px); padding: 13px 18px; border: 0; border-radius: 10px; background: #f2f5f8; box-shadow: none; color: #1e304a; font-size: 14px; line-height: 1.5; }
.message.own .bubble { border: 0; background: #eaf6f0; }
.composer { min-height: 151px; padding: 14px 15px 16px; border-top-color: #dce5ec; background: #fff; }
.composer textarea { min-height: 56px; height: 56px; padding: 16px; border-color: #d5e0e8; border-radius: 8px; color: #233952; font-size: 13px; resize: none; }
.composer-actions { min-height: 47px; margin-top: 4px; }
.composer-actions>div { gap: 27px; }
.upload-label { gap: 9px; color: #607794; font-size: 12px; }
.upload-label svg { width: 20px; height: 20px; color: #096dcc; }
.composer .primary { min-width: 145px; min-height: 46px; gap: 10px; padding: 0 18px; border-radius: 8px; font-size: 13px; }
.composer .primary svg { width: 20px; height: 20px; }
.detail-panel { padding: 23px 22px; }
.detail-panel h3 { margin: 0 0 17px; color: #121f34; font-size: 18px; }
.detail-properties { gap: 7px; }
.detail-property { grid-template-columns: 46px minmax(0,1fr); gap: 15px; min-height: 56px; border-radius: 0; }
.detail-property>span:last-child { display: grid; grid-template-columns: 78px minmax(0,1fr); align-items: center; gap: 8px; }
.detail-property small { color: #637895; font-size: 12px; }
.detail-property b { color: #15243a; font-size: 13px; }
.property-icon { width: 46px; height: 46px; border-radius: 12px; }
.property-icon svg { width: 22px; height: 22px; }
.detail-property .badge { padding: 7px 12px; font-size: 11px; }
.priority-value { justify-self: start; padding: 7px 12px; border-radius: 18px; background: #fff0e5; color: #ae4b12!important; font-size: 11px!important; }
.detail-divider { margin: 14px 0 17px; }
.detail-meta { grid-template-columns: 128px minmax(0,1fr); gap: 17px 8px; padding: 0 2px; font-size: 12px; font-variant-numeric: tabular-nums; }
.detail-meta dt { gap: 11px; color: #58708c; }
.detail-meta dt svg { width: 21px; height: 21px; color: #345777; }
.detail-meta dd { color: #152a43; }
.manager { font-size: 12px; }
.manager>span { color: #58708c; }
.manager>div { gap: 14px; margin-top: 16px; }
.manager .message-avatar { width: 46px; height: 46px; font-size: 14px; }
.manager b { color: #18263d; font-size: 14px; }
.manager small,.manager a { margin-top: 4px; font-size: 12px; }
.manager>div>span:last-child { min-width: 0; }
.manager a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-collapsed .sidebar { width: 72px; }
.side-collapsed .brand { height: 68px; }
.side-collapsed .brand-short { display: grid; place-items: center; width: 48px; height: 48px; color: #fff; font-family: Georgia,serif; font-size: 19px; }
.side-collapsed .side-caption { display: block; visibility: hidden; height: 54px; min-height: 54px; padding: 0; }
.side-collapsed .sidebar nav { gap: 3px; padding: 0 12px; }
.side-collapsed .side-link { width: 48px; min-height: 51px; margin-inline: auto; padding: 0; }
.side-collapsed .sidebar-footer { padding-inline: 12px; }
.side-collapsed .sidebar-footer::before { width: 48px; }
.side-collapsed .sidebar-footer .collapse,.side-collapsed .sidebar-action { justify-content: center; width: 48px; padding: 0; }
.side-collapsed .sidebar-action span { display: none; }
@media(max-width:1500px){.workspace{grid-template-columns:minmax(330px,38%) minmax(500px,1fr)}.detail-panel{display:none}}
@media(max-width:900px){.sidebar{width:72px}.content{padding:20px 18px 28px}.workspace{grid-template-columns:minmax(300px,38%) minmax(440px,1fr)}.sidebar-footer{display:none}.topbar-bell,.topbar-divider{display:none}}
@media(max-width:700px){.content{padding:17px 10px 24px}.page-title{min-height:0}.page-title h1{font-size:27px}.page-title p{font-size:13px}.new-button{min-height:44px}.workspace{display:grid;grid-template-columns:1fr;height:auto}.ticket-row{min-height:96px}.chat-panel{height:640px}.message-day{margin-bottom:16px}}