:root {
  --ink: #17221d;
  --muted: #68736d;
  --line: #dfe6e2;
  --paper: #ffffff;
  --canvas: #f2f5f3;
  --brand: #123f35;
  --brand-2: #1f6b58;
  --accent: #d8b66b;
  --soft: #e8f2ee;
  --danger: #a83f45;
  --shadow: 0 18px 55px rgba(26, 47, 39, .09);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); min-height: 100vh; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--brand); color: white; padding: 30px 22px; display: flex; flex-direction: column; gap: 32px; }
.brand { font-size: 21px; font-weight: 800; text-decoration: none; letter-spacing: -.03em; }
.brand small { display: block; margin-top: 3px; color: #b9cec6; font-size: 11px; text-transform: uppercase; letter-spacing: .16em; }
.nav { display: grid; gap: 7px; }
.nav a { color: #cfe0d9; text-decoration: none; border-radius: 10px; padding: 11px 12px; }
.nav a:hover, .nav a.active { background: rgba(255,255,255,.1); color: white; }
.sidebar-footer { margin-top: auto; color: #cfe0d9; font-size: 13px; }
.sidebar-footer strong { color: white; display: block; }
.sidebar-account { display: flex; align-items: center; gap: 10px; }
.sidebar-account img, .account-initials { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.account-initials { display: grid; place-items: center; background: rgba(255,255,255,.14); color: white; font-weight: 850; text-transform: uppercase; }
.link-button { border: 0; background: none; color: inherit; padding: 0; cursor: pointer; text-decoration: underline; }
.main { min-width: 0; }
.topbar { min-height: 78px; padding: 18px 34px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.82); backdrop-filter: blur(10px); }
.eyebrow { color: var(--brand-2); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.topbar strong { display: block; margin-top: 3px; }
.content { padding: 36px; max-width: 1440px; margin: auto; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; line-height: 1.04; }
h2 { font-size: 22px; letter-spacing: -.025em; }
h3 { font-size: 16px; }
.lead { color: var(--muted); max-width: 720px; font-size: 17px; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--brand); color: white; border: 0; border-radius: 10px; padding: 11px 16px; text-decoration: none; cursor: pointer; font-weight: 700; }
.button:hover { background: var(--brand-2); }
.button.secondary { color: var(--brand); background: var(--soft); }
.button.ghost { color: var(--brand); background: white; border: 1px solid var(--line); }
.button.danger { color: white; background: var(--danger); }
.button.danger:hover { background: #852f34; }
.button.small { padding: 8px 11px; font-size: 13px; }
.grid { display: grid; gap: 18px; }
.grid.cards { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 17px; padding: 22px; box-shadow: 0 1px 0 rgba(24,40,32,.02); }
.card.interactive { text-decoration: none; transition: transform .16s, box-shadow .16s; }
.card.interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.metric { color: var(--muted); font-size: 13px; }
.metric strong { color: var(--ink); display: block; font-size: 30px; margin-top: 7px; }
.client-home-hero { align-items: center; }
.client-home-identity { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.client-home-identity img, .client-home-identity > span { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.client-home-identity > span { display: grid; place-items: center; background: var(--soft); color: var(--brand); font-weight: 900; }
.client-home-identity strong, .client-home-identity small { display: block; }
.client-home-identity small { color: var(--muted); margin-top: 3px; }
.home-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.service-tile { min-height: 285px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: white; color: inherit; text-decoration: none; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .16s, box-shadow .16s, border-color .16s; }
a.service-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #bad3c8; }
.service-tile::after { content: ""; position: absolute; width: 150px; height: 150px; right: -65px; top: -65px; border-radius: 50%; background: var(--soft); opacity: .65; }
.service-icon { width: 48px; height: 48px; margin-bottom: 24px; border-radius: 14px; display: grid; place-items: center; background: var(--soft); color: var(--brand); font-size: 23px; font-weight: 900; position: relative; z-index: 1; }
.service-tile h2 { margin: 5px 0 8px; font-size: 27px; }
.service-tile p { color: var(--muted); line-height: 1.55; }
.service-status { margin-top: auto; color: var(--brand); font-size: 13px; }
.service-arrow { margin-top: 17px; color: var(--brand-2); font-weight: 850; }
.discussions-tile .service-icon { background: #e2f1ec; }
.documents-tile .service-icon { background: #f4ead4; color: #745820; }
.account-tile .service-icon { background: #e5edf6; color: #315a88; }
.settings-tile .service-icon { background: #eee8f4; color: #684e7d; }
.tag, .reference { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; background: var(--soft); color: var(--brand-2); font-size: 12px; font-weight: 800; }
.reference { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; background: #f1eadb; color: #745820; }
.meta { color: var(--muted); font-size: 13px; }
.section { margin-top: 30px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.list { display: grid; gap: 10px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.row-main { min-width: 0; }
.row-main strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.row-actions { display: flex; flex-wrap: wrap; gap: 7px; flex: none; }
.empty { padding: 32px; text-align: center; color: var(--muted); border: 1px dashed #bdc9c3; border-radius: 14px; }
.messages { display: grid; gap: 8px; margin-bottom: 18px; }
.flash { padding: 12px 15px; background: var(--soft); border-left: 4px solid var(--brand-2); border-radius: 8px; }
.flash.error { background: #fae9e9; border-color: var(--danger); }
form.fields, .fields { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 750; }
input, select, textarea { width: 100%; border: 1px solid #cfd9d4; border-radius: 10px; padding: 11px 12px; background: white; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(31,107,88,.14); border-color: var(--brand-2); }
.errorlist { color: var(--danger); font-size: 13px; margin: 0; padding-left: 18px; }
.form-card details > summary, details.form-card > summary { cursor: pointer; font-weight: 800; list-style: none; }
details.form-card[open] > summary { margin-bottom: 18px; }
.tabs { display: flex; gap: 8px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 26px 0 20px; }
.tabs a { padding: 10px 13px; text-decoration: none; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tabs a:hover { color: var(--brand); border-bottom: 2px solid var(--brand); }
.policy { border-left: 4px solid var(--accent); }
.document-icon { width: 42px; height: 48px; border-radius: 8px; background: var(--soft); color: var(--brand); display: grid; place-items: center; font-weight: 900; flex: none; }
.document-row { justify-content: flex-start; }
.document-row .row-main { flex: 1; }
.chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; }
.chat { min-height: 480px; display: flex; flex-direction: column; }
.bubbles { display: flex; flex-direction: column; gap: 12px; flex: 1; max-height: 590px; overflow-y: auto; padding: 5px; }
.bubble { align-self: flex-start; max-width: min(76%, 560px); background: #eef2f0; border-radius: 4px 15px 15px 15px; padding: 11px 13px; }
.bubble.mine { align-self: flex-end; background: #dceee7; border-radius: 15px 4px 15px 15px; }
.bubble-head { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.bubble p { white-space: pre-wrap; margin: 0; }
.bubble-doc { display: block; margin-top: 9px; padding: 8px 10px; background: rgba(255,255,255,.65); border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 750; }
.composer { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 15px; display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.composer .document-select { grid-column: 1 / -1; }
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 1.1fr) minmax(360px, .9fr); background: var(--brand); }
.login-story { padding: clamp(40px, 8vw, 100px); color: white; display: flex; flex-direction: column; justify-content: space-between; }
.login-story h1 { font-size: clamp(44px, 7vw, 82px); max-width: 780px; }
.login-story p { color: #cfe0d9; max-width: 620px; }
.login-panel { background: #f8faf9; padding: clamp(32px, 7vw, 92px); display: grid; place-items: center; }
.login-box { width: min(100%, 430px); }
.demo-note { margin-top: 22px; padding: 14px; background: var(--soft); border-radius: 10px; color: var(--muted); font-size: 13px; }
.permission { display: inline-flex; gap: 5px; color: var(--brand-2); font-size: 12px; }
.hero-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.browser-heading { align-items: end; }
.folder-breadcrumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 0 16px; color: var(--muted); font-size: 13px; }
.folder-breadcrumbs a { color: var(--brand-2); font-weight: 750; text-decoration: none; }
.folder-breadcrumbs strong { color: var(--ink); }
.document-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 220px auto; gap: 10px; margin-bottom: 16px; }
.search-field { position: relative; display: flex; align-items: center; }
.search-field span { position: absolute; left: 14px; color: var(--muted); font-size: 20px; }
.search-field input { padding-left: 42px; }
.view-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: white; }
.view-switch button { min-width: 44px; border: 0; background: white; color: var(--muted); cursor: pointer; font-size: 20px; }
.view-switch button[aria-pressed="true"] { background: var(--brand); color: white; }
.document-explorer { display: grid; gap: 14px; }
.document-explorer.grid-view { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.file-card { background: white; border: 1px solid var(--line); border-radius: 15px; padding: 17px; min-width: 0; transition: box-shadow .16s, transform .16s; }
.file-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.folder-card { border-color: #cbded6; background: #fbfdfc; }
.folder-card-link { color: inherit; text-decoration: none; display: flex; flex: 1; min-width: 0; flex-direction: column; }
.folder-visual { width: 70px; height: 53px; border-radius: 8px 10px 10px 10px; background: #d8ebe3; color: var(--brand); display: grid; place-items: center; font-size: 32px; margin-bottom: 32px; position: relative; }
.folder-visual::before { content: ""; position: absolute; width: 34px; height: 10px; top: -7px; left: 0; border-radius: 6px 6px 0 0; background: #c3dfd3; }
.folder-file-count { color: var(--brand); }
.grid-view .file-card { display: flex; flex-direction: column; min-height: 245px; }
.file-visual { width: 54px; height: 64px; border-radius: 9px; display: grid; place-items: center; color: white; font-size: 12px; font-weight: 900; letter-spacing: .06em; margin-bottom: 22px; position: relative; overflow: hidden; }
.file-visual::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 15px 15px 0; border-color: transparent rgba(255,255,255,.45) transparent transparent; }
.file-visual.pdf { background: #b55256; }
.file-visual.image { background: var(--brand-2); }
.file-info { min-width: 0; flex: 1; }
.file-title-line { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.file-title-line strong { overflow-wrap: anywhere; }
.file-title-line .reference { flex: none; font-size: 10px; }
.file-properties { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.file-properties span { background: #f4f6f5; color: #52605a; border-radius: 6px; padding: 5px 7px; font-size: 11px; }
.file-actions { display: flex; gap: 7px; align-items: center; margin-top: 18px; }
.file-menu { position: relative; }
.file-menu summary { list-style: none; cursor: pointer; }
.file-menu summary::-webkit-details-marker { display: none; }
.move-document-form { position: absolute; z-index: 8; right: 0; bottom: calc(100% + 7px); width: min(300px, calc(100vw - 56px)); padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); display: grid; gap: 8px; }
.move-document-form label { color: var(--muted); font-size: 12px; font-weight: 750; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; display: grid; place-items: center; text-decoration: none; color: var(--brand); font-weight: 900; }
.list-view { grid-template-columns: 1fr; }
.list-view .file-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.list-view .file-visual { width: 42px; height: 49px; margin: 0; }
.list-view .file-actions { margin: 0; }
.list-view .folder-card { grid-template-columns: minmax(0, 1fr) auto; }
.list-view .folder-card-link { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; }
.list-view .folder-visual { width: 44px; height: 34px; margin: 0; font-size: 20px; }
.list-view .folder-visual::before { width: 22px; height: 7px; top: -5px; }
.list-view .folder-card .file-actions { grid-column: 2; }
.explorer-empty { grid-column: 1 / -1; }
.modal { width: min(720px, calc(100vw - 30px)); max-height: calc(100dvh - 30px); border: 0; border-radius: 18px; padding: 0; box-shadow: 0 26px 90px rgba(10,28,21,.28); }
.modal::backdrop { background: rgba(14,32,25,.55); backdrop-filter: blur(3px); }
.modal-card { padding: 25px; overflow-y: auto; max-height: calc(100dvh - 30px); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.modal-head h2 { margin-top: 5px; font-size: 29px; }
.modal-close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: white; color: var(--ink); font-size: 25px; line-height: 1; cursor: pointer; }
.document-form { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
.document-form .full { grid-column: 1 / -1; }
.field small { color: var(--muted); }
.policy-properties[hidden] { display: none; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 8px; }
.account-hero { align-items: center; }
.account-summary { display: flex; align-items: center; gap: 13px; padding: 12px 15px; background: white; border: 1px solid var(--line); border-radius: 15px; min-width: min(100%, 310px); }
.account-summary img, .account-avatar-placeholder { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.account-avatar-placeholder { display: grid; place-items: center; background: var(--soft); color: var(--brand); font-size: 20px; font-weight: 900; text-transform: uppercase; }
.account-summary strong, .account-summary span { display: block; }
.account-summary span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr); gap: 22px; align-items: start; }
.settings-card { margin-top: 0; padding: 24px; background: white; border: 1px solid var(--line); border-radius: 17px; }
.account-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-form .full, .password-form .full { grid-column: 1 / -1; }
.profile-photo-field input { padding: 8px; }
.checkbox-line { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
.checkbox-line input { width: auto; }
.form-actions { display: flex; justify-content: flex-end; padding-top: 5px; }
.password-form small, .password-form small ul { color: var(--muted); font-size: 11px; }
.password-form small ul { margin: 4px 0 0; padding-left: 18px; }
.chat-fab { position: fixed; right: 24px; bottom: 24px; z-index: 40; border: 0; border-radius: 999px; background: var(--brand); color: white; box-shadow: 0 14px 40px rgba(18,63,53,.3); padding: 13px 18px; display: flex; align-items: center; gap: 8px; font-weight: 800; cursor: pointer; }
.chat-fab:hover { background: var(--brand-2); transform: translateY(-1px); }
.chat-unread-badge { position: absolute; top: -8px; right: -7px; min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border: 3px solid var(--canvas); border-radius: 999px; background: #df2638; color: white; font-size: 11px; line-height: 1; box-shadow: 0 4px 12px rgba(150,20,35,.28); }
.chat-unread-badge[hidden] { display: none; }
.chat-toast { position: fixed; right: 24px; bottom: 84px; z-index: 48; width: min(330px, calc(100vw - 30px)); padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--brand-2); border-radius: 12px; background: white; box-shadow: var(--shadow); cursor: pointer; animation: chat-toast-in .18s ease-out; }
.chat-toast[hidden] { display: none; }
.chat-toast strong, .chat-toast span { display: block; }
.chat-toast span { margin-top: 3px; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes chat-toast-in { from { opacity: 0; transform: translateY(8px); } }
.chat-backdrop { position: fixed; inset: 0; z-index: 49; border: 0; background: rgba(14,32,25,.3); backdrop-filter: blur(2px); }
.chat-drawer { position: fixed; z-index: 50; top: 0; right: 0; width: min(440px, 100vw); height: 100dvh; background: #f7f9f8; border-left: 1px solid var(--line); box-shadow: -22px 0 60px rgba(15,35,27,.16); transform: translateX(105%); transition: transform .22s ease; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-drawer.has-subject-bar { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.chat-drawer.open { transform: translateX(0); }
.chat-head { padding: 20px 21px 15px; background: white; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; }
.chat-head h2 { margin: 4px 0 0; }
.chat-client-name { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.chat-client-switch { display: grid; gap: 4px; margin-top: 10px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.chat-client-switch select { padding: 6px 28px 6px 8px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.chat-subject-bar { padding: 11px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; border-bottom: 1px solid var(--line); }
.chat-subject-current span, .chat-subject-current strong { display: block; }
.chat-subject-current span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.chat-subject-current strong { margin-top: 2px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subject-close { width: 30px; height: 30px; border: 1px solid rgba(18,63,53,.14); border-radius: 50%; background: rgba(255,255,255,.72); color: var(--brand); cursor: pointer; font-size: 19px; }
.subject-close[hidden], .chat-switch-subject[hidden] { display: none; }
.chat-switch-subject { grid-column: 1 / -1; padding: 8px 10px; display: flex; gap: 5px; align-items: baseline; border: 1px solid rgba(18,63,53,.13); border-radius: 9px; background: rgba(255,255,255,.72); color: var(--brand); cursor: pointer; text-align: left; }
.chat-switch-subject span { color: var(--muted); font-size: 11px; }
.chat-switch-subject strong { font-size: 12px; }
.chat-drawer .bubbles { padding: 0; gap: 0; max-height: none; overflow-y: auto; }
.chat-subject-segment { width: 100%; border: 0; border-radius: 0; overflow: visible; }
.chat-subject-divider { width: 100%; min-height: 43px; padding: 9px 20px; display: flex; gap: 7px; align-items: center; color: var(--muted); border-top: 1px solid rgba(18,63,53,.14); border-bottom: 1px solid rgba(18,63,53,.1); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.chat-subject-divider::before, .chat-subject-divider::after { content: ""; height: 1px; min-width: 12px; flex: 1; background: currentColor; opacity: .35; }
.chat-subject-divider span { order: 2; }
.chat-subject-divider a, .chat-subject-divider strong { order: 3; min-width: 0; max-width: 58%; color: var(--brand); overflow: hidden; text-overflow: ellipsis; text-transform: none; white-space: nowrap; letter-spacing: 0; }
.chat-subject-divider::after { order: 4; }
.chat-segment-messages { padding: 13px 20px 17px; display: flex; flex-direction: column; gap: 9px; }
.chat-segment-messages:empty { display: none; }
.chat-drawer .bubble { max-width: 87%; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.subject-tone-0 { background: #f8faf9; }
.subject-tone-1 { background: #edf4fb; }
.subject-tone-2 { background: #edf7f2; }
.subject-tone-3 { background: #fbf5e9; }
.subject-tone-4 { background: #f4f0fa; }
.subject-tone-5 { background: #faeff1; }
.chat-subject-segment.subject-tone-1 .bubble { background: #e1edf8; }
.chat-subject-segment.subject-tone-2 .bubble { background: #dff0e7; }
.chat-subject-segment.subject-tone-3 .bubble { background: #f5ead3; }
.chat-subject-segment.subject-tone-4 .bubble { background: #eae2f5; }
.chat-subject-segment.subject-tone-5 .bubble { background: #f4dfe3; }
.chat-subject-segment .bubble.mine { filter: saturate(1.08) brightness(.98); }
.bubble-doc { display: flex; align-items: center; gap: 9px; }
.bubble-doc span:nth-child(2) { flex: 1; min-width: 0; }
.bubble-doc strong, .bubble-doc small { display: block; }
.bubble-doc small { color: var(--muted); font-weight: 500; margin-top: 2px; }
.drawer-composer { background: white; border-top: 1px solid var(--line); padding: 13px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: end; position: relative; }
.chat-form-error { grid-column: 1 / -1; padding: 8px 10px; border-radius: 8px; background: #fae9e9; color: var(--danger); font-size: 12px; }
.chat-form-error[hidden] { display: none; }
.drawer-composer textarea { min-height: 47px; max-height: 130px; resize: vertical; }
.attachment-menu { position: relative; }
.attachment-menu summary { list-style: none; width: 44px; height: 44px; border-radius: 50%; background: var(--soft); color: var(--brand); display: grid; place-items: center; cursor: pointer; font-size: 24px; font-weight: 400; }
.attachment-menu summary::-webkit-details-marker { display: none; }
.attachment-popover { position: absolute; left: 0; bottom: 54px; width: min(340px, calc(100vw - 30px)); padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--shadow); }
.chat-upload-field { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.chat-upload-field[hidden] { display: none; }
.chat-upload-field small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.chat-import-status { min-height: 44px; padding: 9px 12px; display: flex; align-items: center; border: 1px dashed rgba(18,63,53,.22); border-radius: 10px; background: var(--soft); color: var(--brand); font-size: 12px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-import-status[hidden] { display: none; }
.send-button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--brand); color: white; cursor: pointer; }
.send-button:disabled { cursor: not-allowed; opacity: .45; }
.discussion-workspace { width: min(100%, 1080px); margin: 0 auto; }
.discussion-page-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 22px; }
.discussion-page-head h1 { margin-top: 6px; }
.discussion-page-head .lead { margin-bottom: 0; }
.discussion-client-picker { width: min(290px, 100%); display: grid; gap: 6px; flex: none; }
.discussion-client-picker span, .discussion-filter-field > span, .discussion-filters > label > span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.discussion-filters { display: grid; grid-template-columns: minmax(190px, 1.5fr) minmax(135px, .8fr) minmax(135px, .8fr) minmax(190px, 1.2fr) auto; gap: 10px; align-items: end; padding: 15px; border: 1px solid var(--line); border-radius: 14px 14px 0 0; background: white; }
.discussion-filters.contacts-disabled { grid-template-columns: minmax(220px, 1.5fr) minmax(145px, .8fr) minmax(145px, .8fr) auto; }
.discussion-filters label { display: grid; gap: 6px; }
.discussion-filter-field { position: relative; min-width: 0; display: grid; gap: 6px; }
.multi-filter { position: relative; }
.multi-filter > summary { min-height: 41px; padding: 9px 10px; display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid #cfd9d4; border-radius: 10px; background: white; cursor: pointer; list-style: none; }
.multi-filter > summary::-webkit-details-marker { display: none; }
.multi-filter > summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-filter > summary b { color: var(--muted); font-size: 14px; }
.multi-filter[open] > summary { border-color: var(--brand-2); outline: 3px solid rgba(31,107,88,.14); }
.multi-filter-popover { position: absolute; z-index: 20; top: calc(100% + 7px); left: 0; width: max(100%, 250px); max-height: 260px; padding: 8px; overflow-y: auto; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow); }
.multi-filter-popover label { padding: 8px 9px; display: flex; grid-template-columns: none; gap: 9px; align-items: center; border-radius: 8px; cursor: pointer; }
.multi-filter-popover label:hover { background: var(--soft); }
.multi-filter-popover input { width: 17px; height: 17px; margin: 0; padding: 0; flex: none; accent-color: var(--brand-2); }
.multi-filter-popover label span { min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 650; }
.discussion-filters input, .discussion-filters select { padding: 9px 10px; }
.discussion-result-bar { min-height: 42px; padding: 10px 15px; display: flex; justify-content: space-between; gap: 15px; align-items: center; border: solid var(--line); border-width: 0 1px 1px; background: #f8faf9; color: var(--muted); font-size: 12px; }
.discussion-result-bar strong { color: var(--brand); }
.chat-drawer.chat-page-panel { position: relative; z-index: 1; top: auto; right: auto; width: 100%; height: 720px; min-height: 620px; max-height: calc(100dvh - 150px); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 18px 18px; box-shadow: var(--shadow); transform: none; transition: none; overflow: visible; }
.chat-page-panel .chat-head { border-radius: 0; }
.chat-page-panel .bubbles { min-height: 0; }
.chat-page-panel .bubble { max-width: min(76%, 640px); }
.discussion-chat-head { align-items: center; }
.realtime-indicator { display: inline-flex; gap: 7px; align-items: center; padding: 6px 9px; border-radius: 999px; background: var(--soft); color: var(--brand-2); font-size: 11px; font-weight: 800; }
.realtime-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #2c9a72; box-shadow: 0 0 0 4px rgba(44,154,114,.13); }
.discussion-no-results { position: absolute; z-index: 3; left: 50%; top: 52%; transform: translate(-50%, -50%); width: min(360px, calc(100% - 30px)); padding: 18px; border: 1px dashed #bdc9c3; border-radius: 12px; background: rgba(255,255,255,.94); color: var(--muted); text-align: center; box-shadow: var(--shadow); }
.discussion-no-results[hidden] { display: none; }
.chat-disabled { margin: 14px; padding: 14px; border-radius: 10px; background: #f1e8e8; color: #7b3a3e; }
body.chat-open { overflow: hidden; }
.document-banner { background: white; border: 1px solid var(--line); border-radius: 18px 18px 0 0; padding: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.document-identity { min-width: 0; }
.back-link { display: inline-block; color: var(--brand-2); text-decoration: none; font-weight: 750; margin-bottom: 20px; }
.document-title-wrap { display: flex; gap: 16px; align-items: center; }
.document-title-wrap h1 { font-size: clamp(28px, 4vw, 42px); margin: 4px 0 9px; overflow-wrap: anywhere; }
.file-visual.large { width: 64px; height: 76px; margin: 0; flex: none; }
.file-visual.docx { background: #3566a8; }
.document-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.document-properties { background: #f8faf9; border: solid var(--line); border-width: 0 1px 1px; border-radius: 0 0 18px 18px; padding: 16px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 15px; }
.document-properties > div { min-width: 0; }
.document-properties span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.document-properties strong { display: block; margin-top: 4px; font-size: 13px; overflow-wrap: anywhere; }
.technical-value { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 500; font-size: 11px !important; }
.viewer-shell { margin-top: 20px; border: 1px solid var(--line); border-radius: 17px; background: #dfe4e1; overflow: hidden; }
.viewer-toolbar { min-height: 66px; padding: 12px 16px; background: white; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.viewer-toolbar strong { display: block; margin-top: 3px; font-size: 13px; }
.pdf-controls { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pdf-controls button, .viewer-toolbar > .icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--brand); cursor: pointer; display: grid; place-items: center; }
.pdf-controls span { min-width: 48px; text-align: center; font-size: 12px; }
.secure-viewer { min-height: 620px; max-height: calc(100dvh - 150px); overflow: auto; display: grid; place-items: start center; padding: 28px; position: relative; }
.secure-viewer:fullscreen { max-height: none; height: 100vh; background: #dfe4e1; }
.secure-viewer canvas { display: block; background: white; box-shadow: 0 12px 36px rgba(20,35,29,.18); max-width: none; }
.viewer-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); background: #edf0ee; z-index: 2; }
.viewer-loading[hidden] { display: none; }
.viewer-loading.error { color: var(--danger); padding: 30px; text-align: center; }
.image-viewer img { display: block; max-width: none; height: auto; margin: auto; box-shadow: 0 12px 36px rgba(20,35,29,.18); transform-origin: center center; transition: width .14s ease, transform .14s ease; }
.docx-container { width: 100%; min-width: 0; }
.docx-container .docx-wrapper { background: transparent !important; padding: 0 !important; }
.docx-container .docx-wrapper > section.docx { margin: 0 auto 20px !important; box-shadow: 0 12px 36px rgba(20,35,29,.18); }
.document-footer-meta { display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 11px; padding: 12px 3px; }
.document-footer-meta code { overflow-wrap: anywhere; }
.document-footer-meta a { color: var(--brand-2); font-weight: 700; }
.compact-modal { width: min(520px, calc(100vw - 30px)); }
.danger-text { color: var(--danger); }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; padding: 18px; gap: 18px; }
  .nav { grid-template-columns: repeat(3, auto); overflow-x: auto; }
  .sidebar-footer { display: none; }
  .topbar, .content { padding: 22px; }
  .grid.two, .chat-layout, .login-page { grid-template-columns: 1fr; }
  .login-story { min-height: 42vh; padding: 38px; }
  .hero { align-items: flex-start; flex-direction: column; }
  .document-toolbar { grid-template-columns: 1fr 190px auto; }
  .document-banner { align-items: flex-start; flex-direction: column; }
  .document-actions { justify-content: flex-start; }
  .secure-viewer { min-height: 520px; }
  .settings-grid { grid-template-columns: 1fr; }
  .home-service-grid { grid-template-columns: 1fr 1fr; }
  .discussion-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discussion-filters.contacts-disabled { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discussion-filters .button { width: 100%; }
}
@media (max-width: 600px) {
  .content { padding: 18px; }
  .topbar { padding: 15px 18px; }
  .row { align-items: flex-start; flex-wrap: wrap; }
  .bubble { max-width: 90%; }
  .discussion-page-head { align-items: stretch; flex-direction: column; }
  .discussion-client-picker { width: 100%; }
  .discussion-filters { grid-template-columns: 1fr 1fr; padding: 12px; }
  .discussion-filters .discussion-filter-field, .discussion-filters .button { grid-column: 1 / -1; }
  .multi-filter-popover { width: 100%; }
  .discussion-result-bar { align-items: flex-start; flex-direction: column; gap: 3px; }
  .chat-drawer.chat-page-panel { height: 76dvh; min-height: 590px; max-height: none; }
  .chat-page-panel .bubble { max-width: 90%; }
  .composer { grid-template-columns: 1fr; }
  .document-hero .hero-actions, .document-hero .hero-actions .button { width: 100%; }
  .document-toolbar { grid-template-columns: 1fr auto; }
  .document-toolbar .search-field { grid-column: 1 / -1; }
  .document-toolbar select { min-width: 0; }
  .document-explorer.grid-view { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .grid-view .file-card { min-height: 230px; padding: 13px; }
  .grid-view .file-title-line { display: block; }
  .grid-view .file-title-line .reference { margin-top: 6px; }
  .grid-view .file-properties { display: none; }
  .list-view .file-card { grid-template-columns: 40px minmax(0, 1fr); }
  .list-view .file-actions { grid-column: 1 / -1; }
  .list-view .folder-card { grid-template-columns: 1fr; }
  .list-view .folder-card-link { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .list-view .folder-card .file-actions { grid-column: 1; }
  .move-document-form { position: fixed; left: 16px; right: 16px; bottom: 16px; width: auto; }
  .document-form { grid-template-columns: 1fr; }
  .document-form .full { grid-column: auto; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .button { width: 100%; }
  .chat-fab { right: 15px; bottom: 15px; }
  .chat-fab > span:nth-child(2) { display: none; }
  .chat-fab { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .chat-toast { right: 15px; bottom: 78px; }
  .chat-drawer { width: 100vw; }
  .document-banner { padding: 18px; }
  .document-title-wrap { align-items: flex-start; }
  .file-visual.large { width: 48px; height: 58px; }
  .document-actions, .document-actions .button { width: 100%; }
  .document-properties { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 15px 18px; }
  .viewer-toolbar { align-items: flex-start; flex-direction: column; }
  .pdf-controls { justify-content: flex-start; }
  .secure-viewer { min-height: 430px; padding: 12px; max-height: calc(100dvh - 210px); }
  .document-footer-meta { flex-direction: column; }
  .account-summary { width: 100%; }
  .account-form { grid-template-columns: 1fr; }
  .account-form .full { grid-column: auto; }
  .form-actions .button { width: 100%; }
  .client-home-identity { width: 100%; }
  .home-service-grid { grid-template-columns: 1fr; }
  .service-tile { min-height: 245px; }
}