:root {
  --ink: #351821;
  --muted: #79676c;
  --primary: #7a1736;
  --primary-dark: #63132b;
  --primary-deep: #430c1e;
  --accent: #ead6b5;
  --ivory: #fdf6e9;
  --surface: #fffdf9;
  --background: #fbf5ec;
  --line: #eaded8;
  font-family: "Tajawal", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--background); overflow-x: hidden; }
button, input { font: inherit; }
.topbar { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: rgba(253,246,233,.94); backdrop-filter: blur(14px); }
.topbar-inner { display:flex; align-items:center; gap:20px; width:calc(100% - 48px); max-width:none; min-height:70px; margin:auto; }
.brand { display: flex; align-items: center; flex:0 0 auto; gap: 10px; color: var(--primary-dark); text-decoration: none; font-size: 25px; font-weight: 800; }
.brand-logo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 5px 18px rgba(99,19,43,.18); }
.agent-icon { display: grid; place-items: center; color: var(--ivory); background: var(--primary); border-radius: 14px; }
.account-nav { display:flex; flex:1; align-items:center; min-width:0; gap:14px; }.nav-links,.nav-account { display:flex; align-items:center; gap:7px; white-space:nowrap; }.nav-links { flex:1; min-width:0; overflow:visible; }.nav-links::-webkit-scrollbar { display:none; }.nav-account { flex:0 0 auto; }.account-nav form { margin:0; }.nav-toggle { display:none; }
.profile-name { border: 1px solid #e6cbd3; border-radius: 999px; padding: 9px 14px; background: #f7e7eb; color: var(--primary-dark); font-weight: 700; }
.nav-button { display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:38px;border:0;border-radius:8px;padding:0 9px;background:transparent;color:var(--ink);text-decoration:none;font-size:13px;font-weight:700;cursor:pointer;transition:background .18s,color .18s; }.nav-button-outline{background:transparent;color:var(--ink)}.nav-button:hover,.nav-button:focus-visible{color:var(--primary);background:#f5e9e5;outline:0}.admin-nav-button{background:var(--primary)!important;color:#fff!important;padding-inline:12px}.nav-notifications{position:relative;width:38px;padding:0;overflow:visible}.notification-bell{font-size:18px;line-height:1;filter:grayscale(1) sepia(.55) saturate(4)}.nav-notification-badge{position:absolute;top:-5px;left:-5px;z-index:2;display:grid;place-items:center;min-width:18px;height:18px;padding:0 3px;border:2px solid var(--ivory);border-radius:999px;color:#fff;background:#c04440;font-size:10px;font-weight:800;line-height:1}.page-shell { width: min(1360px, calc(100% - 48px)); margin: 28px auto 64px; }
.page-shell:has(.chat-shell) { width: calc(100% - 32px); max-width: none; margin: 16px auto; }
.messages { width: min(1120px, calc(100% - 36px)); margin: 18px auto 0; }
.table-wrap { overflow-x: auto; border-radius: 18px; }
.accounts-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.accounts-table th, .accounts-table td { padding: 15px; border-bottom: 1px solid var(--line); text-align: right; }
.accounts-table th { color: var(--primary-dark); background: #f6e9e7; }
.account-link { color: var(--primary); font-weight: 800; }
.profile-card { padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0; }
.profile-field { padding: 16px; border-radius: 14px; background: #faf3eb; }
.profile-field strong { display: block; margin-bottom: 6px; color: var(--muted); }
.review-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.review-actions select { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: white; }
.review-actions button { min-height: 44px; border: 0; border-radius: 12px; padding: 0 18px; color: white; background: var(--primary); cursor: pointer; }
.review-actions .reject { background: #6c5e62; }
.roles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 22px; }
.role-form { display: grid; gap: 10px; }
.role-form input, .role-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; background: white; }
.role-form button, .delete-role-form button { min-height: 44px; border: 0; border-radius: 12px; padding: 0 16px; color: white; background: var(--primary); cursor: pointer; }
.delete-role-form { margin-top: 10px; }
.delete-role-form button { background: #6c5e62; }
@media (max-width: 760px) { .roles-grid, .profile-grid { grid-template-columns: 1fr; } }
.hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 4px 30px; }
.hero h1 { margin: 4px 0 8px; font-size: clamp(34px, 6vw, 56px); }
.hero p { color: var(--muted); font-size: 18px; }
.membership-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.membership-summary > span { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); }
.role-badge { font-weight: 800; }
.role-manager { color: var(--primary-dark) !important; background: #f4e0e6 !important; border-color: #dfbcc7 !important; }
.role-employee { color: #365548 !important; background: #e9f2ed !important; border-color: #c9ddd2 !important; }
.eyebrow { margin: 0; color: var(--primary); font-weight: 800; }
.hero-orb { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; color: var(--ivory); background: radial-gradient(circle at 35% 30%, #98284b, var(--primary-dark) 70%); box-shadow: 0 18px 45px rgba(99,19,43,.2); font-size: 48px; transform: rotate(-5deg); }
.agent-box { padding: clamp(24px, 5vw, 48px); border-radius: 32px; color: var(--ivory); background: linear-gradient(135deg, var(--primary-deep), var(--primary)); box-shadow: 0 24px 70px rgba(99,19,43,.2); }
.agent-box h2 { margin: 16px 0 5px; font-size: clamp(26px, 4vw, 38px); }
.agent-box p { margin-top: 0; color: #f0dfe2; }
.manager-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding: 22px 26px; border: 1px solid #dfc7ce; border-radius: 22px; background: #fff8f8; }
.manager-panel h2 { margin: 4px 0; }
.manager-panel p:last-child { margin: 0; color: var(--muted); }
.agent-icon { width: 52px; height: 52px; background: rgba(255,255,255,.16); font-size: 26px; }
.prompt-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 28px; }
.prompt-form input, .prompt-form button { min-height: 54px; border: 0; border-radius: 16px; }
.prompt-form input { padding: 0 18px; background: rgba(255,253,249,.96); }
.prompt-form button { padding: 0 24px; color: var(--primary-deep); background: var(--accent); font-weight: 800; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 50px 0 18px; }
.section-heading h2 { margin: 5px 0 0; font-size: 32px; }
.status { padding: 8px 12px; border-radius: 999px; color: var(--primary-dark); background: #f2dfe4; font-size: 14px; }
.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.action-card { padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); transition: transform .2s, box-shadow .2s; }
.action-card:hover { transform: translateY(-4px); border-color: #d9bdc5; box-shadow: 0 16px 40px rgba(99,19,43,.09); }
.action-card > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--primary-dark); background: #f5e7e9; font-size: 24px; }
.action-card h3 { margin: 22px 0 8px; font-size: 21px; }
.action-card p { margin: 0; color: var(--muted); line-height: 1.7; }
.auth-layout { min-height: calc(100vh - 176px); display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(36px, 8vw, 100px); padding: 30px 0; }
.auth-intro h1 { margin: 8px 0 12px; font-size: clamp(38px, 5vw, 60px); line-height: 1.15; }
.auth-intro > p:last-child { color: var(--muted); font-size: 18px; line-height: 1.8; }
.auth-mark { display: grid; place-items: center; width: 82px; height: 82px; margin-bottom: 28px; border-radius: 24px; color: var(--ivory); background: linear-gradient(135deg, var(--primary), var(--primary-deep)); font-size: 36px; box-shadow: 0 20px 45px rgba(99,19,43,.2); }
.auth-card { width: 100%; max-width: 520px; justify-self: end; padding: clamp(26px, 5vw, 44px); border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: 0 22px 60px rgba(67,12,30,.09); }
.auth-card-wide { max-width: 600px; }
.auth-card h2 { margin: 0 0 5px; font-size: 32px; }
.auth-subtitle { margin: 0 0 26px; color: var(--muted); }
.auth-form { display: grid; gap: 10px; }
.auth-form label { margin-top: 7px; font-weight: 700; }
.auth-form input { width: 100%; min-height: 50px; border: 1px solid #ddcfca; border-radius: 13px; padding: 0 14px; color: var(--ink); background: #fff; outline: none; }
.auth-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(122,23,54,.1); }
.auth-form button { min-height: 52px; margin-top: 14px; border: 0; border-radius: 14px; color: #fff; background: var(--primary); font-weight: 800; cursor: pointer; }
.auth-form button:hover { background: var(--primary-dark); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid > div { display: grid; gap: 10px; }
.field-error { color: #a20d37; }
.form-alert { margin-bottom: 14px; border-radius: 12px; padding: 12px 14px; color: #86102f; background: #f9e4e9; }
.auth-switch { margin: 22px 0 0; text-align: center; color: var(--muted); }
.auth-switch a { color: var(--primary); font-weight: 800; }
@media (max-width: 850px) { .action-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 850px) { .auth-layout { grid-template-columns: 1fr; gap: 24px; } .auth-intro { text-align: center; } .auth-mark { margin-inline: auto; } .auth-card { justify-self: center; } }
/* The workspace navigation has many sections; switch to its compact menu
   before the links can overlap or be clipped at intermediate widths. */
@media (max-width: 1680px) { .topbar-inner { width:calc(100% - 32px); min-height:68px; gap:14px; }.brand { font-size:22px; }.brand-logo { width:42px; height:42px; }.nav-toggle { display:grid; place-items:center; width:42px; height:42px; margin-inline-start:auto; border:1px solid var(--line); border-radius:12px; color:var(--primary); background:var(--surface); font-size:22px; cursor:pointer; }.account-nav { position:absolute; top:calc(100% + 8px); right:16px; left:16px; display:none; max-height:calc(100vh - 92px); overflow:auto; padding:12px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 18px 45px rgba(67,12,30,.16); }.account-nav.is-open { display:grid; gap:12px; }.nav-links,.nav-account { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; white-space:normal; }.nav-account { padding-top:12px; border-top:1px solid var(--line); }.nav-account form,.nav-account .nav-button { width:100%; }.nav-button { min-height:44px; padding:8px 10px; text-align:center; }.profile-name { display:flex; justify-content:center; align-items:center; min-height:44px; }.page-shell { width:min(100% - 32px, 1360px); margin-top:20px; } }
@media (max-width: 560px) { .topbar-inner { width:calc(100% - 24px); }.brand span { display:none; }.account-nav { right:12px; left:12px; }.nav-links,.nav-account { grid-template-columns:1fr; }.page-shell { width:calc(100% - 24px); margin-top:16px; margin-bottom:36px; }.hero-orb { display: none; } .prompt-form { grid-template-columns: 1fr; } .action-grid { grid-template-columns: 1fr; } .section-heading { align-items: start; } .form-grid { grid-template-columns: 1fr; } }

/* Primary admin — roles workspace */
.admin-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 34px 38px; border-radius: 28px; color: #fff; background: linear-gradient(125deg, #430c1e 0%, #751532 60%, #9a3454 100%); box-shadow: 0 22px 55px rgba(67,12,30,.18); }
.admin-hero h1 { margin: 8px 0 10px; font-size: clamp(32px, 5vw, 48px); }
.admin-hero p { max-width: 690px; margin: 0; color: #f5dfe6; line-height: 1.8; }
.admin-kicker { display: inline-flex; padding: 7px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #f7e8c9; background: rgba(255,255,255,.1); font-size: 14px; font-weight: 800; }
.admin-hero-actions { display: flex; flex-shrink: 0; gap: 10px; }
.primary-action, .secondary-action, .danger-action { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; border: 0; border-radius: 13px; padding: 0 18px; text-decoration: none; font-weight: 800; cursor: pointer; }
.primary-action { color: #fff; background: var(--primary); box-shadow: 0 8px 20px rgba(99,19,43,.18); }
.admin-hero .primary-action { color: var(--primary-deep); background: var(--accent); }
.secondary-action { border: 1px solid rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.08); }
.role-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 24px; }
.role-stats > div { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,253,249,.88); }
.role-stats span { color: var(--muted); font-size: 14px; }
.role-stats strong { color: var(--primary-deep); font-size: 20px; }
.success-text { color: #23704c !important; }
.roles-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.55fr); align-items: start; gap: 22px; }
.new-role-panel { position: sticky; top: 20px; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 14px 38px rgba(67,12,30,.07); }
.new-role-panel h2, .list-heading h2 { margin: 5px 0 8px; font-size: 27px; }
.panel-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 15px; color: #fff; background: var(--primary); font-size: 25px; }
.panel-hint { margin: 0 0 22px; color: var(--muted); line-height: 1.7; }
.polished-form { display: grid; gap: 16px; }
.form-field { display: grid; gap: 7px; }
.form-field label { color: var(--ink); font-weight: 800; }
.form-field label small, .form-field > small { color: var(--muted); font-weight: 400; }
.polished-form input:not([type=checkbox]), .polished-form textarea { width: 100%; border: 1px solid #dbcac5; border-radius: 13px; padding: 12px 14px; color: var(--ink); background: #fff; outline: none; resize: vertical; }
.polished-form input:focus, .polished-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(122,23,54,.1); }
.full-action { width: 100%; }
.roles-list { display: grid; gap: 13px; }
.list-heading { display: flex; align-items: end; justify-content: space-between; padding: 4px 3px 8px; }
.muted-badge { padding: 7px 11px; border-radius: 999px; color: var(--muted); background: #efe7df; font-size: 13px; }
.role-card { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 7px 22px rgba(67,12,30,.045); transition: border-color .2s, box-shadow .2s; }
.role-card[open] { border-color: #d8b6c0; box-shadow: 0 14px 34px rgba(67,12,30,.08); }
.role-card summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; }
.role-card summary::-webkit-details-marker { display: none; }
.role-avatar { display: grid; place-items: center; flex: 0 0 46px; height: 46px; border-radius: 14px; color: var(--primary-dark); background: #f5e4e8; font-size: 21px; font-weight: 800; }
.role-summary-main { display: grid; flex: 1; gap: 3px; min-width: 0; }
.role-summary-main strong { font-size: 18px; }
.role-summary-main small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.role-meta { display: grid; justify-items: end; gap: 5px; color: var(--muted); }
.status-pill { padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.status-pill.active { color: #1c6945; background: #e5f3eb; }
.status-pill.inactive { color: #776a6e; background: #eee9e7; }
.chevron { color: var(--muted); font-size: 22px; transition: transform .2s; }
.role-card[open] .chevron { transform: rotate(180deg); }
.role-card-body { padding: 22px; border-top: 1px solid var(--line); background: #fffdfa; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.role-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 4px; }
.switch-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch-row > input { position: absolute; opacity: 0; pointer-events: none; }
.switch-control { position: relative; width: 43px; height: 24px; border-radius: 999px; background: #c9bfbc; transition: background .2s; }
.switch-control::after { content: ''; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .2s; }
.switch-row input:checked + .switch-control { background: #2f8059; }
.switch-row input:checked + .switch-control::after { transform: translateX(-19px); }
.switch-row > span:last-child { display: grid; gap: 1px; }
.switch-row small { color: var(--muted); }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed #decac5; }
.danger-zone > span { display: grid; gap: 2px; }
.danger-zone small { color: var(--muted); }
.danger-action { min-height: 40px; color: #a21d3f; background: #f9e7eb; }
.empty-state { padding: 50px; border: 1px dashed #d8c6c0; border-radius: 22px; text-align: center; color: var(--muted); background: var(--surface); }
.empty-state span { font-size: 38px; }
@media (max-width: 900px) { .admin-hero { align-items: flex-start; flex-direction: column; } .roles-layout { grid-template-columns: 1fr; } .new-role-panel { position: static; } }
@media (max-width: 620px) { .role-stats { grid-template-columns: 1fr; } .admin-hero { padding: 25px; } .admin-hero-actions { width: 100%; } .admin-hero-actions a { flex: 1; } .two-fields { grid-template-columns: 1fr; } .role-meta { display: none; } .role-card-footer, .danger-zone { align-items: stretch; flex-direction: column; } .list-heading { align-items: start; flex-direction: column; gap: 8px; } }

/* Admin home and employee profile */
.admin-nav-button { gap: 7px; color: #fff; background: var(--primary-deep); }
.admin-home-hero { align-items: center; }
.admin-symbol { display: grid; place-items: center; width: 92px; height: 92px; flex: 0 0 92px; border: 1px solid rgba(255,255,255,.25); border-radius: 26px; color: var(--primary-deep); background: var(--accent); font-size: 48px; font-weight: 800; transform: rotate(-4deg); box-shadow: 0 16px 32px rgba(0,0,0,.13); }
.warning-text { color: #bd5d1e !important; }
.admin-sections-heading { display: flex; align-items: end; justify-content: space-between; margin: 38px 0 16px; }
.admin-sections-heading h2 { margin: 5px 0 0; font-size: 30px; }
.admin-sections-heading > span { padding: 7px 11px; border-radius: 999px; color: var(--muted); background: #efe7df; font-size: 13px; }
.admin-sections-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; }
.admin-section-card { position: relative; display: flex; align-items: center; gap: 17px; min-height: 145px; padding: 25px; overflow: hidden; border: 1px solid var(--line); border-radius: 23px; color: var(--ink); background: var(--surface); text-decoration: none; box-shadow: 0 9px 28px rgba(67,12,30,.055); transition: transform .2s, box-shadow .2s, border-color .2s; }
a.admin-section-card:hover { transform: translateY(-4px); border-color: #d5b3bd; box-shadow: 0 18px 40px rgba(67,12,30,.11); }
.section-card-icon { display: grid; place-items: center; flex: 0 0 58px; height: 58px; border-radius: 18px; color: #fff; background: var(--primary); font-size: 28px; }
.roles-section .section-card-icon { color: var(--primary-deep); background: var(--accent); }
.section-card-copy { display: grid; flex: 1; gap: 7px; }
.section-card-copy strong { font-size: 22px; }
.section-card-copy small { max-width: 430px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.section-arrow { font-size: 25px; color: var(--primary); }
.notification-count { position: absolute; top: 15px; left: 15px; display: grid; place-items: center; min-width: 27px; height: 27px; border-radius: 999px; color: #fff; background: #c04440; font-size: 13px; font-weight: 800; }
.coming-section { border-style: dashed; box-shadow: none; opacity: .72; }
.coming-section .section-card-icon { color: var(--muted); background: #eee7e1; }
.coming-pill { padding: 6px 9px; border-radius: 999px; color: var(--muted); background: #eee7e1; font-size: 12px; }
.employee-profile-hero { display: flex; align-items: center; gap: 20px; padding: 30px 34px; border: 1px solid var(--line); border-radius: 27px; background: linear-gradient(130deg, #fffdf9, #f8e9e7); box-shadow: 0 15px 42px rgba(67,12,30,.08); }
.employee-avatar { display: grid; place-items: center; width: 76px; height: 76px; flex: 0 0 76px; border-radius: 22px; color: #fff; background: linear-gradient(145deg, var(--primary), var(--primary-deep)); font-size: 32px; font-weight: 800; }
.employee-profile-hero h1 { margin: 4px 0; font-size: 35px; }
.employee-profile-hero p:last-child { margin: 0; color: var(--muted); }
.employee-role-pill { margin-inline-start: auto; padding: 10px 15px; border: 1px solid #d9bdc5; border-radius: 999px; color: var(--primary-dark); background: #f5e2e7; font-weight: 800; }
.employee-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.profile-content-card { padding: 26px; border: 1px solid var(--line); border-radius: 23px; background: var(--surface); box-shadow: 0 8px 25px rgba(67,12,30,.05); }
.content-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.content-card-heading > span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; color: #fff; background: var(--primary); font-weight: 800; }
.content-card-heading h2 { margin: 0 0 3px; }
.content-card-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.capability-list, .task-list { display: grid; gap: 10px; }
.capability-list > div { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 13px; background: #f8f2eb; }
.capability-list > div > span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #23704c; background: #dff0e7; font-size: 12px; }
.task-list > div:not(.profile-empty-state) { display: flex; align-items: start; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; }
.task-list > div > span { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 8px; color: var(--primary-dark); background: #f3e2e7; font-size: 12px; font-weight: 800; }
.task-list p { margin: 2px 0 0; }
.profile-empty-state { display: grid; justify-items: center; gap: 7px; padding: 35px 15px; text-align: center; color: var(--muted); }
.profile-empty-state > span { width: auto !important; height: auto !important; color: #c4aaa8 !important; background: transparent !important; font-size: 32px !important; }
.profile-empty-state small { color: var(--muted); }
.profile-info-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.profile-info-strip > div { display: grid; gap: 4px; padding: 17px 20px; border-inline-start: 1px solid var(--line); }
.profile-info-strip > div:first-child { border-inline-start: 0; }
.profile-info-strip small { color: var(--muted); }
.tasks-editor-label { flex-basis: 100%; font-weight: 800; }
.tasks-editor { flex-basis: 100%; width: 100%; border: 1px solid var(--line); border-radius: 13px; padding: 12px; resize: vertical; }
.tasks-editor-help { flex-basis: 100%; color: var(--muted); }
@media (max-width: 760px) { .admin-sections-grid, .employee-profile-grid { grid-template-columns: 1fr; } .employee-profile-hero { align-items: flex-start; flex-wrap: wrap; } .employee-role-pill { margin-inline-start: 0; } .profile-info-strip { grid-template-columns: 1fr; } .profile-info-strip > div { border-inline-start: 0; border-top: 1px solid var(--line); } }

/* Rova assistant */
.action-card-link { display: block; color: inherit; text-decoration: none; }
.chat-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: calc(100vh - 108px); min-height: 650px; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: 0 22px 60px rgba(67,12,30,.09); }
.chat-sidebar { padding: 22px 16px; border-inline-end: 1px solid var(--line); background: #f7efe6; }
.chat-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 7px 18px; }
.chat-sidebar-head h2 { margin: 3px 0 0; }
.chat-sidebar-head button { display: grid; place-items: center; width: 39px; height: 39px; border: 0; border-radius: 12px; color: #fff; background: var(--primary); font-size: 21px; cursor: pointer; }
.conversation-list { display: grid; gap: 7px; }
.conversation-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 13px; color: var(--ink); text-decoration: none; }
.conversation-item:hover, .conversation-item.active { background: #fff; box-shadow: 0 5px 14px rgba(67,12,30,.06); }
.conversation-item > span:first-child { color: var(--primary); }
.conversation-item > span:last-child { display: grid; min-width: 0; }
.conversation-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item small, .conversation-empty { color: var(--muted); }
.conversation-empty { padding: 24px 10px; text-align: center; }
.chat-panel { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; min-height: 680px; }
.chat-header { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.chat-agent-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, var(--primary), var(--primary-deep)); font-size: 22px; }
.chat-header h1 { margin: 0 0 3px; font-size: 21px; }
.chat-header p { margin: 0; color: var(--muted); font-size: 13px; }
.chat-header p span { display: inline-block; width: 8px; height: 8px; margin-inline-end: 4px; border-radius: 50%; background: #39a46d; }
.messages-stream { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding: 28px; background: linear-gradient(180deg, #fffdf9, #fcf7f0); }
.chat-welcome { align-self: center; margin: auto; max-width: 480px; text-align: center; color: var(--muted); }
.chat-welcome > span { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 21px; color: #fff; background: var(--primary); font-size: 30px; box-shadow: 0 13px 28px rgba(99,19,43,.2); }
.chat-welcome h2 { margin: 0 0 8px; color: var(--ink); font-size: 29px; }
.chat-message { position: relative; align-self: flex-start; max-width: min(76%, 680px); padding: 13px 16px 9px; border: 1px solid var(--line); border-radius: 18px 18px 5px 18px; background: #fff; box-shadow: 0 6px 18px rgba(67,12,30,.05); }
.chat-message.user { align-self: flex-end; border-color: transparent; border-radius: 18px 18px 18px 5px; color: #fff; background: var(--primary); }
.message-author { margin-bottom: 5px; color: var(--primary); font-size: 12px; font-weight: 800; }
.chat-message.user .message-author { color: #f3ccd7; }
.message-content { line-height: 1.75; }
.chat-message time { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; text-align: left; }
.chat-message.user time { color: #e9bdca; }
.chat-composer { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding: 18px 22px; border-top: 1px solid var(--line); background: #fff; }
.chat-composer textarea { min-height: 50px; max-height: 150px; border: 1px solid #dac9c4; border-radius: 14px; padding: 13px 15px; outline: none; resize: vertical; }
.chat-composer textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(122,23,54,.1); }
.chat-composer button { min-width: 110px; border: 0; border-radius: 14px; color: #fff; background: var(--primary); font-weight: 800; cursor: pointer; }
.chat-composer > small { grid-column: 1 / -1; color: var(--muted); text-align: center; }
.chat-media-controls { display: flex; grid-column: 1 / -1; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.image-upload-button { display: inline-flex; align-items: center; gap: 10px; min-width: 205px; padding: 10px 14px; border: 1px dashed #bd8d9d; border-radius: 14px; color: var(--primary); background: linear-gradient(135deg, #fff7f4, #f8edf0); cursor: pointer; transition: .18s ease; }
.image-upload-button:hover { border-style: solid; transform: translateY(-1px); box-shadow: 0 7px 16px rgba(122,23,54,.1); }
.image-upload-button strong, .image-upload-button small { display: block; }
.image-upload-button small { margin-top: 2px; color: var(--muted); font-weight: 500; }
.image-upload-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #fff; background: var(--primary); font-size: 21px; }
.image-preview { display: flex; gap: 8px; flex-basis: 100%; flex-wrap: wrap; }
.image-preview:empty { display: none; }
.image-preview-card { position: relative; width: 66px; height: 66px; }
.image-preview img { width: 66px; height: 66px; border: 1px solid var(--line); border-radius: 11px; object-fit: cover; background: #f7efe6; }
.image-preview-remove { position: absolute; top: -6px; inset-inline-end: -6px; display: grid; place-items: center; width: 21px; min-width: 21px !important; height: 21px; padding: 0 !important; border: 2px solid #fff !important; border-radius: 50% !important; background: #6a263c !important; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.image-upload-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.generate-image-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; cursor: pointer; }
.generate-image-toggle:has(input:checked) { color: var(--primary); border-color: #b9798c; background: #fff5f7; font-weight: 800; }
.chat-image-link { display: block; margin-top: 10px; }
.chat-image { display: block; width: min(100%, 420px); max-height: 400px; margin-top: 10px; border-radius: 12px; object-fit: contain; background: #f7efe6; }
@media (max-width: 760px) { .chat-shell { grid-template-columns: 1fr; } .chat-sidebar { border-inline-end: 0; border-bottom: 1px solid var(--line); } .conversation-list { display: flex; overflow-x: auto; } .conversation-item { min-width: 190px; } .chat-panel { min-height: 600px; } .chat-message { max-width: 88%; } }

/* Chat workspace */
.message-content { white-space: pre-wrap; overflow-wrap: anywhere; text-align: start; unicode-bidi: plaintext; }
.chat-artifact { display:block; padding:12px 16px; margin-top:10px; border:1px solid var(--line); border-radius:12px; background:#f7efe6; color:var(--primary); text-decoration:none; font-weight:700; }
.reasoning-effort { border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fff; color:var(--ink); font:inherit; font-weight:700; }
.chat-composer textarea, .chat-settings input, .chat-settings textarea { font-family: inherit; font-size: 16px; text-align: start; }
.chat-panel { height: 100%; min-height: 620px; }
.chat-sidebar { max-height: 85vh; overflow-y: auto; }
.chat-details { margin-block: 10px; font-size: 14px; }
.chat-details summary { cursor: pointer; padding: 10px 0; font-weight: 700; }
.chat-settings { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf9; }
.chat-settings label { display: grid; gap: 6px; }
.chat-settings input, .chat-settings textarea, .chat-settings select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px; box-sizing: border-box; }
.chat-settings button { padding: 9px 14px; background: var(--primary); color: white; border: 0; border-radius: 9px; cursor: pointer; }
.chat-settings p, .chat-settings small { color: var(--muted); line-height: 1.7; margin: 0; }
.chat-actions { margin-inline-start: auto; position: relative; }
.chat-actions .chat-settings { position: absolute; inset-inline-end: 0; top: 40px; width: 280px; z-index: 5; box-shadow: 0 8px 30px #0002; }
.chat-composer button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 760px) { .page-shell:has(.chat-shell) { width: calc(100% - 16px); margin: 8px auto; } .chat-shell { height: auto; min-height: 0; } .chat-sidebar { max-height: 350px; } .chat-panel { height: 75vh; } }
.chat-header { flex-wrap: wrap; }

.dashboard-tasks { margin: 24px 0; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.dashboard-tasks .section-heading { margin-bottom: 12px; }
.dashboard-tasks ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.dashboard-tasks li { padding: 12px 14px; border-radius: 12px; background: #f8f1eb; color: var(--ink); font-weight: 700; }

/* Assistant team — manager-led, auditable work routing. */
.assistant-team-link { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 auto 12px; max-width:1400px; color:var(--muted); font-size:13px; }.assistant-team-link a { color:var(--primary); font-weight:800; text-decoration:none; }.team-page { max-width:1400px; margin:10px auto 36px; }.team-hero { display:flex; align-items:center; justify-content:space-between; gap:34px; padding:clamp(28px,5vw,58px); border-radius:28px; color:#fff; background:radial-gradient(circle at 91% 8%,#cb7890 0,#a4395b 14%,transparent 36%),linear-gradient(118deg,#340b1c,#65132f 60%,#8d1f41); box-shadow:0 18px 46px #4d142427; }.team-hero>div { max-width:820px; }.team-hero .eyebrow { color:#f6c8d4; }.team-hero h1 { margin:5px 0 12px; font-size:clamp(29px,4vw,48px); }.team-hero p:last-child { margin:0; color:#f9e7eb; line-height:1.9; }.team-primary-action { flex:0 0 auto; padding:14px 20px; border-radius:13px; color:var(--primary-deep); background:#fff9f4; font-weight:800; text-decoration:none; }.team-org { margin-top:22px; padding:30px; border:1px solid var(--line); border-radius:26px; background:var(--surface); }.team-owner { display:grid; justify-items:center; gap:3px; width:max-content; min-width:175px; margin:auto; padding:15px 20px; border-radius:16px; background:#f7ecde; color:var(--primary-deep); }.team-owner span,.team-manager span,.team-member span { color:#8b6070; font-size:12px; font-weight:800; }.team-owner strong { font-size:22px; }.team-owner small { color:var(--muted); }.team-line { width:2px; height:24px; margin:auto; background:#d6b7bf; }.team-manager { display:flex; align-items:center; gap:16px; width:min(650px,100%); margin:auto; padding:21px; border:1px solid #dfc3cb; border-radius:19px; background:linear-gradient(120deg,#fffafa,#fbf0ec); }.team-manager h2,.team-member h2 { margin:2px 0 5px; }.team-manager p { margin:0; color:var(--muted); line-height:1.7; }.team-manager a { margin-inline-start:auto; white-space:nowrap; color:var(--primary); font-size:13px; font-weight:800; text-decoration:none; }.team-avatar { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border-radius:16px; color:#fff; background:linear-gradient(145deg,#9b3653,#5b1028); font-size:20px; font-weight:800; }.team-branches { height:28px; width:75%; margin:0 auto; border-inline:2px solid #d6b7bf; border-top:2px solid #d6b7bf; }.team-members { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.team-member { display:grid; align-content:start; gap:14px; padding:20px; border:1px solid var(--line); border-radius:18px; background:#fffdfb; }.team-member-head { display:flex; align-items:center; gap:11px; }.team-member h2 { font-size:21px; }.team-member p { min-height:68px; margin:0; color:var(--muted); font-size:14px; line-height:1.72; }.team-approval { padding:7px 9px; border-radius:9px; color:#994020; background:#fff1df; font-size:11px; line-height:1.5; }.team-member-actions { display:flex; gap:9px; margin-top:auto; }.team-member-actions a { flex:1; padding:9px 7px; border:1px solid #e4ced4; border-radius:9px; color:var(--primary); font-size:12px; font-weight:800; text-align:center; text-decoration:none; }.team-member-actions a:first-child { color:#fff; background:var(--primary); border-color:var(--primary); }.team-workspace { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr); gap:20px; margin-top:22px; }.team-task-forms,.team-task-board { padding:24px; border:1px solid var(--line); border-radius:22px; background:var(--surface); }.team-workspace header h2 { margin:4px 0 16px; font-size:24px; }.team-task-form { border-top:1px solid var(--line); }.team-task-form summary { padding:15px 0; color:var(--primary-deep); cursor:pointer; font-weight:800; }.team-task-form form { display:grid; gap:10px; padding:0 0 16px; }.team-task-form label { display:grid; gap:5px; font-size:13px; font-weight:700; }.team-task-form input,.team-task-form textarea { width:100%; box-sizing:border-box; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; font:inherit; }.team-task-form textarea { min-height:90px; resize:vertical; }.team-task-form button { justify-self:start; padding:10px 15px; border:0; border-radius:10px; color:#fff; background:var(--primary); font:inherit; font-weight:800; cursor:pointer; }.team-task-form small { color:#a26331; }.team-task-board { align-self:start; }.team-task { display:flex; justify-content:space-between; gap:10px; padding:14px 0; border-top:1px solid var(--line); }.team-task div { display:grid; gap:5px; }.team-task strong { font-size:15px; }.team-task small { color:var(--muted); font-size:12px; }.team-task em { align-self:start; padding:4px 7px; border-radius:999px; color:#995023; background:#fff0df; font-size:11px; font-style:normal; white-space:nowrap; }.team-status { width:max-content; padding:3px 7px; border-radius:999px; color:#5e5060; background:#eee9e5; font-size:11px; font-weight:800; }.team-status-in_progress { color:#285881; background:#e7f2fb; }.team-status-waiting_approval { color:#95501f; background:#fff0df; }.team-status-done { color:#24714b; background:#e4f5eb; }.team-empty { color:var(--muted); line-height:1.8; }@media(max-width:1050px){.team-members{grid-template-columns:repeat(2,minmax(0,1fr));}.team-branches{display:none}.team-members{margin-top:18px}.team-workspace{grid-template-columns:1fr;}}@media(max-width:680px){.assistant-team-link{align-items:flex-start; flex-direction:column;}.team-hero{align-items:flex-start; flex-direction:column;}.team-primary-action{width:100%; box-sizing:border-box; text-align:center;}.team-org,.team-task-forms,.team-task-board{padding:18px;}.team-manager{align-items:flex-start; flex-wrap:wrap;}.team-manager a{margin-inline-start:0}.team-members{grid-template-columns:1fr;}.team-member p{min-height:0}.team-workspace{gap:14px;}}

/* Voice studio */
.chat-panel:has(> .voice-controls) { grid-template-rows: auto auto minmax(180px, 1fr) auto; }
.voice-controls { margin: 18px 22px 0; border: 1px solid #e6d9d7; border-radius: 22px; background: linear-gradient(115deg, #fbf3ee, #fffdfb 65%); overflow: hidden; }
.voice-summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; color: var(--primary); cursor: pointer; font-weight: 800; }
.voice-summary small { color: var(--muted); font-weight: 500; }
.voice-controls[open] .voice-summary { border-bottom: 1px solid #e6d9d7; }
.voice-stage { display: flex; align-items: center; gap: 22px; padding: 28px; }
.voice-orb { flex: 0 0 90px; height: 90px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #b56680, #792b48 55%, #46172b); box-shadow: 0 0 0 8px #852f4d08, 0 12px 26px #792b4826; }
.voice-wave { display: flex; align-items: center; gap: 5px; height: 36px; }
.voice-wave i { width: 4px; height: 12px; background: #fff1e9; border-radius: 5px; }
.voice-wave i:nth-child(2), .voice-wave i:nth-child(4) { height: 23px; }
.voice-wave i:nth-child(3) { height: 35px; }
.voice-intro { flex: 1; min-width: 0; }
.voice-eyebrow { font-size: 11px; letter-spacing: .6px; color: #8e5867; font-weight: 700; }
.voice-intro h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 8px 0; color: #482332; }
.voice-intro p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.7; }
#voice-status { margin-top: 12px; font-size: 13px; color: #6e4856; line-height: 1.6; }
.voice-buttons { display: flex; flex-direction: column; gap: 8px; min-width: 140px; }
.voice-controls button { min-height: 44px; border: 1px solid #dfcbd1; border-radius: 12px; padding: 11px 16px; color: var(--primary); background: #fff; cursor: pointer; font: inherit; font-weight: 700; }
.voice-controls #voice-start { background: var(--primary); color: white; border-color: var(--primary); }
.voice-controls #voice-stop { color: #a12c40; background: #fff5f5; border-color: #f1d6db; }
.voice-controls button:disabled { opacity: .5; cursor: default; }
.voice-controls [hidden] { display: none; }
.voice-controls :is(button, summary, select):focus-visible { outline: 3px solid #b6738b; outline-offset: 3px; }
.voice-settings { border-top: 1px solid #eadfda; }
.voice-settings summary { padding: 12px 24px; cursor: pointer; color: #684553; font-size: 13px; }
.voice-settings summary span { color: var(--muted); margin-inline-start: 10px; font-size: 12px; }
.voice-settings-grid { padding: 4px 24px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-height: 220px; overflow-y: auto; }
.voice-settings label { display: grid; gap: 7px; font-size: 13px; color: #684553; min-width: 0; }
.voice-settings select { width: 100%; min-width: 0; padding: 10px; border: 1px solid #dfcbd1; border-radius: 9px; background: white; font: inherit; }
.voice-settings .voice-history-option { display: flex; align-items: center; grid-column: 1 / -1; }
.voice-history-option input { accent-color: var(--primary); }
.voice-privacy, #voice-device-status, .voice-playback { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0; }
#voice-device-status:empty { display: none; }
.voice-playback audio { width: 100%; height: 32px; }
.voice-controls[data-state="speaking"] .voice-wave i, .voice-controls[data-state="listening"] .voice-wave i { animation: voice-wave .85s ease-in-out infinite alternate; }
.voice-controls .voice-wave i:nth-child(2n) { animation-delay: -.3s; }
.voice-controls[data-state="listening"] .voice-orb { box-shadow: 0 0 0 8px #4c94751a; }
.voice-controls[data-state="muted"] .voice-orb { filter: grayscale(1); opacity: .6; }
.voice-controls[data-state="connecting"] .voice-orb { animation: voice-connect 1.5s ease-in-out infinite alternate; }
.voice-controls:is([data-state="ready"], [data-state="speaking"], [data-state="listening"], [data-state="muted"]) #voice-start { display: none; }
@keyframes voice-wave { to { transform: scaleY(.45); } }
@keyframes voice-connect { to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .voice-controls .voice-orb, .voice-controls .voice-wave i { animation: none !important; } }
@media (max-width: 1000px) { .voice-stage { flex-wrap: wrap; gap: 18px; padding: 22px; } .voice-buttons { flex-direction: row; flex-wrap: wrap; width: 100%; } .voice-buttons button { flex: 1; } }
@media (max-width: 760px) { .voice-controls { margin: 12px 12px 0; border-radius: 18px; } .voice-stage { padding: 18px; gap: 16px; } .voice-orb { flex-basis: 62px; height: 62px; } .voice-intro h2 { font-size: 23px; } .voice-intro p { font-size: 13px; } .voice-settings-grid { grid-template-columns: 1fr; padding-inline: 18px; } .chat-panel:has(> .voice-controls) { height: auto; min-height: 80vh; } .messages-stream { min-height: 200px; } }

/* Compact voice launcher beside the media controls. */
.chat-media-controls .voice-controls { position: relative; margin: 0; overflow: visible; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.chat-media-controls .voice-summary { display: flex; gap: 6px; padding: 10px 12px; color: var(--primary); }
.chat-media-controls .voice-popover { position: absolute; z-index: 20; bottom: calc(100% + 12px); inset-inline-start: 0; width: min(670px, calc(100vw - 48px)); overflow: hidden; border: 1px solid #e6d9d7; border-radius: 20px; background: #fffdf9; box-shadow: 0 18px 45px rgba(67,12,30,.18); }
.voice-popover-close { position: absolute; z-index: 1; top: 12px; inset-inline-start: 12px; display: grid; place-items: center; width: 31px; min-width: 31px !important; height: 31px; min-height: 31px !important; padding: 0 !important; border: 1px solid #e2cbd2 !important; border-radius: 50% !important; color: var(--primary) !important; background: #fff !important; font-size: 23px !important; line-height: 1; cursor: pointer; }
.voice-popover-close:hover { background: #fff2f4 !important; }
.chat-media-controls .voice-stage { padding: 20px; }
.chat-media-controls .voice-orb { flex-basis: 68px; height: 68px; }
.chat-media-controls .voice-intro h2 { font-size: 23px; }
.chat-media-controls .voice-buttons { flex-direction: row; min-width: 0; }
.chat-media-controls .voice-buttons button { min-width: 0; }
@media (max-width: 760px) {
  .chat-media-controls .voice-controls { margin: 0; }
  /* The launcher sits inside a wrapping composer.  On phones an absolutely
     positioned popover can therefore escape the viewport on the inline side.
     Pin it to the viewport and give its content a single, readable column. */
  .chat-media-controls .voice-popover {
    position: fixed;
    z-index: 50;
    inset-inline: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .chat-media-controls .voice-stage {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 20px;
  }
  .chat-media-controls .voice-orb { align-self: center; }
  .chat-media-controls .voice-buttons { width: 100%; }
}

/* Customer support and CRM workspace */
.support-page { display: grid; gap: 20px; }.support-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px; border-radius: 25px; color: #fff; background: linear-gradient(125deg, #430c1e, #7a1736 65%, #a94561); }.support-hero h1 { margin: 3px 0 8px; font-size: 31px; }.support-hero p { margin: 0; color: #f8dfe6; line-height: 1.7; }.support-hero .eyebrow { color: #f4c8d5; }.support-status, .support-form { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); line-height: 1.8; }.support-cases { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); }.support-cases > header { display: flex; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }.support-cases h2 { margin: 0; }.support-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--line); }.support-case h3 { margin: 9px 0 5px; }.support-case p { margin: 0; line-height: 1.7; }.support-channel { display: inline-block; padding: 3px 9px; border-radius: 999px; color: var(--primary); background: #f8e9ee; font-size: 12px; font-weight: 800; }.support-case small { color: var(--muted); }.support-draft { padding: 12px; border-radius: 12px; background: #fbf4ed; }.support-draft strong { color: var(--primary); font-size: 12px; }.support-delete { margin-top:12px; border:1px solid #b6384e; border-radius:9px; padding:8px 12px; background:#fff; color:#9b2037; font:inherit; font-weight:800; cursor:pointer; }.support-delete:disabled { opacity:.55; cursor:wait; }.support-empty { padding: 55px; text-align: center; color: var(--muted); }.support-empty span { font-size: 34px; }.support-form h2 { margin-top: 0; }.support-form form { display: grid; gap: 13px; }.support-form label { display: grid; gap: 6px; color: var(--ink); font-weight: 700; }.support-form input, .support-form textarea, .support-form select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; }.support-form textarea { min-height: 90px; resize: vertical; }.support-options, .support-form fieldset { display: flex; gap: 14px; flex-wrap: wrap; border: 0; padding: 0; }.support-options label, .support-form fieldset label { display: flex; align-items: center; gap: 7px; font-weight: 500; }.support-options input, .support-form fieldset input { width: auto; }.support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.support-note { color: var(--muted); }.support-rules { display: grid; gap: 10px; margin-top: 18px; }.support-rules article { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; }.support-rules p { margin: 7px 0 0; white-space: pre-wrap; }.support-rules button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }.risk-high, .risk-critical { margin-inline-start: 8px; color: #a12c40; font-size: 12px; }.risk-normal { margin-inline-start: 8px; color: var(--muted); font-size: 12px; }@media (max-width: 760px) { .support-hero, .support-case { grid-template-columns: 1fr; align-items: flex-start; }.support-hero { flex-direction: column; }.support-grid { grid-template-columns: 1fr; } }
.support-form .support-save-rule { justify-self: start; color: #fff; background: var(--primary); }
.department-agent { display:flex; align-items:center; gap:15px; padding:16px 18px; border:1px solid #dec8cf; border-radius:18px; background:linear-gradient(110deg,#fffafa,#f8eff0); }.department-agent-avatar { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border-radius:15px; color:#fff; background:linear-gradient(145deg,#9a3453,#5f112c); font-size:21px; font-weight:800; }.department-agent-copy { flex:1; min-width:0; }.department-agent-copy>span { color:#976274; font-size:11px; font-weight:800; }.department-agent h2 { margin:2px 0 4px; color:var(--primary-deep); font-size:19px; }.department-agent h2 small { color:#9b806f; font-size:12px; font-weight:500; }.department-agent p { margin:0; color:#796674; font-size:13px; line-height:1.65; }.department-agent-actions { display:flex; align-items:center; gap:9px; flex:0 0 auto; }.department-agent-actions>a { padding:10px 13px; border-radius:10px; color:#fff; background:var(--primary); font-size:12px; font-weight:800; text-decoration:none; white-space:nowrap; }.department-agent-actions details { position:relative; }.department-agent-actions summary { padding:9px 11px; border:1px solid #ddc8cf; border-radius:10px; color:var(--primary); background:#fff; cursor:pointer; font-size:12px; font-weight:800; white-space:nowrap; }.department-agent-actions form { position:absolute; z-index:10; inset-inline-end:0; top:calc(100% + 8px); display:grid; gap:8px; width:min(310px,calc(100vw - 38px)); padding:14px; border:1px solid #dec6ce; border-radius:13px; background:#fffdfb; box-shadow:0 16px 42px #4e14232b; }.department-agent-actions input,.department-agent-actions textarea { width:100%; box-sizing:border-box; padding:9px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:12px; }.department-agent-actions textarea { min-height:75px; resize:vertical; }.department-agent-actions button { border:0; border-radius:8px; padding:9px 11px; color:#fff; background:var(--primary); font:inherit; font-size:12px; font-weight:800; cursor:pointer; }@media(max-width:760px){.department-agent{align-items:flex-start;flex-wrap:wrap;padding:15px}.department-agent-copy{flex-basis:calc(100% - 64px)}.department-agent-actions{width:100%}.department-agent-actions>a,.department-agent-actions details{flex:1}.department-agent-actions summary{text-align:center}}
.department-agent-desk{margin-top:12px;border:1px solid #dec8cf;border-radius:18px;background:#fffdfb;overflow:hidden}.department-agent-desk>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;color:var(--primary);font-weight:800;cursor:pointer}.department-agent-desk>summary span{color:var(--muted);font-size:12px;font-weight:500}.department-agent-desk iframe{display:block;width:100%;height:460px;border:0;border-top:1px solid var(--line);background:#fff}.department-desk-page{margin:0;background:#fffdfb;font-family:inherit}.department-desk{display:grid;grid-template-rows:auto minmax(140px,1fr) auto;min-height:100%;color:var(--ink)}.department-desk>header{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);background:#fff8f4}.department-desk>header .department-agent-avatar{width:34px;height:34px;flex-basis:34px;border-radius:11px;font-size:16px}.department-desk>header div{display:grid;gap:1px;flex:1}.department-desk>header small{color:var(--muted);font-size:11px}.department-desk>header a{color:var(--primary);font-size:12px;font-weight:800;text-decoration:none}.department-desk-messages{display:grid;align-content:start;gap:9px;max-height:310px;padding:14px;overflow:auto}.department-desk-message{max-width:86%;padding:9px 11px;border-radius:12px;background:#f7f0e9}.department-desk-message-user{justify-self:start;background:#6e1233;color:#fff}.department-desk-message b{font-size:11px}.department-desk-message p{margin:4px 0 0;white-space:pre-wrap;font-size:13px;line-height:1.55}.department-desk-empty{margin:24px 8px;color:var(--muted);text-align:center;line-height:1.7}.department-desk form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}.department-desk textarea{min-height:38px;flex:1;padding:9px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13px;resize:vertical}.department-desk button{border:0;border-radius:10px;padding:9px 14px;color:#fff;background:var(--primary);font:inherit;font-size:12px;font-weight:800;cursor:pointer}.department-desk-alert{margin:8px 14px;padding:8px;border-radius:8px;color:#8a203b;background:#fff0f2;font-size:12px}@media(max-width:760px){.department-agent-desk>summary{align-items:flex-start;flex-direction:column}.department-agent-desk iframe{height:520px}.department-desk-messages{max-height:360px}}

/* A customer-facing WebRTC call page. It has no phone-provider dependency. */
.public-voice { max-width: 610px; margin: 7vh auto; padding: clamp(28px, 6vw, 52px); text-align: center; border: 1px solid #ead8da; border-radius: 30px; background: radial-gradient(circle at 50% 0, #fff7f2, #fff 68%); box-shadow: 0 18px 55px #44101b12; }
.public-voice-eyebrow { margin: 0; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: 1px; }.public-voice h1 { margin: 10px 0; color: #482332; font-size: clamp(30px, 6vw, 44px); }.public-voice-intro { max-width: 430px; margin: 0 auto; color: var(--muted); line-height: 1.8; }.public-voice-orb { display:flex; align-items:center; justify-content:center; gap:7px; width:118px; height:118px; margin:30px auto 18px; border-radius:50%; background:radial-gradient(circle at 30% 25%,#bd6b85,#791c3d 60%,#431024); box-shadow:0 0 0 12px #8c315112,0 16px 38px #5d1c3525; }.public-voice-orb span { width:6px; height:22px; border-radius:8px; background:#fff0f4; }.public-voice-orb span:nth-child(2){height:45px}.public-voice[data-state="live"] .public-voice-orb span { animation:voice-wave .65s ease-in-out infinite alternate; }.public-voice[data-state="live"] .public-voice-orb span:nth-child(2){animation-delay:-.3s}.public-voice-actions{display:flex;justify-content:center;gap:10px;margin:20px 0}.public-voice button{border:0;border-radius:12px;padding:13px 20px;background:var(--primary);color:#fff;font:inherit;font-weight:800;cursor:pointer}.public-voice #public-voice-stop{background:#fff0f2;color:#9d273d;border:1px solid #e8bec6}.public-voice button:disabled{opacity:.55}.public-voice-language{display:inline-grid;gap:6px;color:var(--muted);font-size:13px}.public-voice-language select{padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;font:inherit}.public-voice-note{margin:20px 0 0;color:var(--muted);font-size:12px}.public-voice audio{display:none}
.whatsapp-inbox-status { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px; border:1px solid #bde3cd; border-radius:18px; background:linear-gradient(110deg,#effbf4,#fbfffc); }.whatsapp-inbox-status.whatsapp-inbox-new { border-color:#3daa6a; box-shadow:0 0 0 4px #3daa6a20; }.whatsapp-inbox-status h2 { margin:6px 0 2px; font-size:20px; }.whatsapp-inbox-status p { margin:0; color:#426050; }.whatsapp-inbox-status .secondary-action { flex:0 0 auto; }.support-case-unread { background:#f3fff7; }.support-new { display:inline-block; margin-inline-start:7px; padding:3px 8px; border-radius:999px; color:#12613d; background:#ccefd9; font-size:11px; font-weight:800; }@media(max-width:760px){.whatsapp-inbox-status{align-items:flex-start; flex-direction:column;}.whatsapp-inbox-status .secondary-action{width:100%; text-align:center;}}
.support-call-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.support-call-grid fieldset { display:grid; gap:12px; min-width:0; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fcf7f0; }.support-call-grid legend { padding-inline:7px; color:var(--primary); font-weight:800; }.scheduled-call-list { display:grid; gap:9px; margin-top:20px; }.scheduled-call-list h3 { margin:0 0 3px; }.scheduled-call-list article { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:14px; border:1px solid var(--line); border-radius:13px; }.scheduled-call-list strong,.scheduled-call-list span { display:block; }.scheduled-call-list span,.scheduled-call-list small { color:var(--muted); font-size:13px; }.scheduled-call-list p { margin:6px 0 0; white-space:pre-wrap; }.scheduled-call-list aside { display:grid; gap:4px; flex:0 0 auto; text-align:end; }.scheduled-call-list b { color:var(--primary); font-size:13px; }@media(max-width:760px){.support-call-grid{grid-template-columns:1fr;}.scheduled-call-list article{flex-direction:column;}.scheduled-call-list aside{text-align:start;}}
.marketing-platforms { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }.marketing-platforms h2 { grid-column:1/-1; margin:0; }.marketing-platforms article { display:grid; gap:7px; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }.marketing-platforms span { color:var(--muted); font-size:13px; }.support-form > form + form { margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }
.report-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:22px 0; }.report-overview a { display:grid; gap:7px; padding:20px; border:1px solid var(--line); border-radius:17px; background:var(--surface); color:var(--ink); text-decoration:none; }.report-overview strong { color:var(--primary); font-size:30px; }.report-overview small { color:var(--muted); }@media(max-width:760px){.report-overview{grid-template-columns:1fr;}}
.quote-report-feed { margin:24px 0; padding:24px; border:1px solid var(--line); border-radius:22px; background:var(--surface); }.quote-report-feed>header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }.quote-report-feed h2 { margin:6px 0 0; font-size:25px; }.quote-report-card { display:grid; grid-template-columns:minmax(190px,.45fr) minmax(0,1fr) auto; align-items:start; gap:18px; padding:18px 0; border-top:1px solid var(--line); }.quote-report-main h3 { margin:9px 0 5px; font-size:18px; }.quote-report-main p,.quote-report-main small { margin:0; color:var(--muted); line-height:1.65; }.quote-report-replies { display:grid; gap:8px; }.quote-report-replies article { padding:12px 14px; border-radius:12px; background:#f7f0e8; }.quote-report-replies article span { color:var(--primary); font-size:12px; font-weight:800; }.quote-report-replies article p { margin:6px 0; white-space:pre-wrap; line-height:1.7; }.quote-report-replies small,.quote-report-waiting { color:var(--muted); font-size:12px; }.quote-report-open { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:9px; color:var(--primary); text-decoration:none; }.quote-report-open:hover { background:#f7e9ed; }@media(max-width:760px){.quote-report-feed{padding:18px;}.quote-report-feed>header{align-items:flex-start;flex-direction:column;}.quote-report-card{grid-template-columns:1fr auto;}.quote-report-replies{grid-column:1/-1;}}
.marketing-edit { margin-top:12px; }.marketing-edit summary { cursor:pointer; color:var(--primary); font-weight:800; }.marketing-edit form { display:grid; gap:8px; margin-top:10px; }.marketing-edit label { display:grid; gap:4px; font-size:13px; }.marketing-edit input,.marketing-edit textarea { width:100%; box-sizing:border-box; padding:8px; border:1px solid var(--line); border-radius:8px; font:inherit; }.marketing-edit textarea { min-height:90px; resize:vertical; }.marketing-edit + form { margin-top:10px; }

/* Compact desktop navigation: preserve a normal desktop header and move only
   lower-priority routes into a "more" menu at constrained desktop widths. */
@media (min-width:1101px) and (max-width:1680px) {
  .topbar-inner { width:calc(100% - 32px); min-height:64px; gap:10px; }
  .brand { gap:7px; font-size:22px; }.brand-logo { width:40px; height:40px; }
  .nav-toggle { display:none; }
  .account-nav { position:static; display:flex; max-height:none; overflow:visible; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; gap:8px; }
  .nav-links,.nav-account { display:flex; grid-template-columns:none; gap:3px; overflow:visible; white-space:nowrap; }
  .nav-links > a.nav-secondary { display:none; }
  .nav-button { min-height:38px; padding-inline:7px; font-size:12px; }.profile-name { min-height:38px; padding:8px 11px; font-size:13px; }
  .nav-account form,.nav-account .nav-button { width:auto; }
  .nav-more { position:relative; display:block; flex:0 0 auto; }
  .nav-more summary { display:flex; align-items:center; gap:4px; min-height:38px; padding:0 9px; border-radius:8px; color:var(--ink); cursor:pointer; font-size:12px; font-weight:700; list-style:none; }
  .nav-more summary::-webkit-details-marker { display:none; }.nav-more summary:hover,.nav-more[open] summary { color:var(--primary); background:#f5e9e5; }
  .nav-more > div { position:absolute; top:calc(100% + 8px); left:0; z-index:50; display:grid; min-width:190px; padding:7px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 16px 35px rgba(67,12,30,.15); }
  .nav-more > div a { padding:10px 12px; border-radius:9px; color:var(--ink); text-decoration:none; font-size:13px; font-weight:700; }.nav-more > div a:hover,.nav-more > div a:focus-visible { color:var(--primary); background:#f5e9e5; outline:0; }
}

/* Calm, conversation-first assistant workspace. */
body:has(.chat-shell) { background:#fff; } body:has(.chat-shell) .topbar, body:has(.chat-shell) .assistant-team-link { display:none; } body:has(.chat-shell) .page-shell,body:has(.chat-shell) .page-shell:has(.chat-shell) { width:100%; margin:0; }
.chat-shell { grid-template-columns:272px minmax(0,1fr); width:100%; height:100dvh; min-height:0; border:0; border-radius:0; box-shadow:none; background:#fff; direction:rtl; }
.chat-sidebar { display:flex; flex-direction:column; min-height:0; max-height:none; padding:14px 10px; overflow-y:auto; border-inline-end:1px solid #ececec; background:#f9f9f9; }.chat-sidebar-head { padding:2px 5px 15px; }.chat-sidebar-head h2 { font-size:15px; font-weight:700; color:#505050; }.chat-sidebar-head button { width:35px; height:35px; border:1px solid #e1e1e1; border-radius:10px; color:#333; background:#fff; font-size:20px; transition:transform .18s ease,background .18s ease; }.chat-sidebar-head button:hover { background:#eee; transform:scale(1.04); }.conversation-list { gap:2px; }.conversation-item { gap:9px; padding:10px 9px; border-radius:9px; color:#454545; font-size:13px; transition:background .16s ease,transform .16s ease; }.conversation-item:hover,.conversation-item.active { background:#eaeaea; box-shadow:none; }.conversation-item:hover { transform:translateX(-2px); }.conversation-item small { margin-top:2px; font-size:10px; }.chat-sidebar h3 { margin:20px 9px 7px; color:#777; font-size:12px; font-weight:700; }.chat-details { margin:3px 9px; color:#666; font-size:12px; }.chat-details summary { padding:8px 0; }.chat-settings { border-color:#e7e7e7; border-radius:12px; background:#fff; }
.chat-panel { height:100%; min-height:0; grid-template-rows:auto minmax(0,1fr) auto; background:#fff; }.chat-header { min-height:58px; padding:10px max(22px,4vw); border-bottom:0; gap:9px; }.chat-sidebar-toggle { display:none; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:10px; background:transparent; cursor:pointer; }.chat-sidebar-toggle:hover { background:#f2f2f2; }.chat-sidebar-toggle span { display:block; width:18px; height:2px; margin:3px; border-radius:99px; background:#444; }.chat-agent-avatar { width:30px; height:30px; border-radius:9px; background:linear-gradient(145deg,#8b1e40,#541027); font-size:14px; box-shadow:none; }.chat-header h1 { margin:0; color:#303030; font-size:15px; font-weight:700; }.chat-header p { margin-top:1px; color:#929292; font-size:11px; }.chat-actions { margin-inline-start:auto; }
.messages-stream { gap:22px; padding:20px max(22px,10vw) 24px; background:#fff; scroll-behavior:smooth; }.chat-welcome { max-width:590px; color:#707070; animation:chat-rise .45s cubic-bezier(.2,.75,.25,1) both; }.chat-welcome>span { width:50px; height:50px; margin-bottom:20px; border-radius:15px; background:#7a1736; font-size:22px; box-shadow:0 12px 28px rgba(122,23,54,.16); }.chat-welcome h2 { color:#292929; font-size:clamp(26px,3vw,35px); letter-spacing:-.4px; }.chat-welcome p { margin:7px 0; font-size:16px; line-height:1.75; }.chat-message { width:min(100%,760px); max-width:100%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; animation:chat-rise .28s cubic-bezier(.2,.75,.25,1) both; }.chat-message.user { width:fit-content; max-width:min(78%,680px); padding:11px 15px; border-radius:18px; color:#fff; background:#6e1433; }.message-author { display:none; }.message-content { color:#333; font-size:15px; line-height:1.9; }.chat-message.user .message-content { color:#fff; line-height:1.7; }.chat-message time { display:none; }.chat-image { border-radius:14px; background:#f5f5f5; }.chat-artifact { border-color:#e7e7e7; border-radius:12px; background:#fafafa; color:#6e1433; }
.chat-composer { width:min(830px,calc(100% - 34px)); margin:0 auto; padding:0 0 17px; grid-template-columns:1fr auto; gap:0; border:0; background:transparent; }.chat-composer textarea { min-height:54px; max-height:180px; padding:15px 51px 14px 16px; border:1px solid #dedede; border-radius:18px; background:#fff; color:#303030; resize:none; box-shadow:0 3px 14px rgba(0,0,0,.05); transition:border .2s ease,box-shadow .2s ease; }.chat-composer textarea:focus { border-color:#b8b8b8; box-shadow:0 5px 20px rgba(0,0,0,.08); }.chat-composer>button[type="submit"] { align-self:end; width:38px; min-width:38px; height:38px; margin:0 0 8px 8px; border-radius:12px; color:#fff; background:#6e1433; font-size:0; transition:transform .18s ease,background .18s ease; }.chat-composer>button[type="submit"]::after { content:"↑"; font-size:22px; line-height:1; }.chat-composer>button[type="submit"]:hover { background:#531027; transform:translateY(-2px); }.chat-media-controls { grid-column:1/-1; gap:7px; margin:7px 6px 0; }.reasoning-effort,.generate-image-toggle,.image-upload-button { min-width:0; padding:6px 9px; border:0; border-radius:8px; background:transparent; color:#777; font-size:11px; }.image-upload-button { border:0; background:transparent; }.image-upload-button:hover { border-style:none; background:#f5f5f5; box-shadow:none; transform:none; }.image-upload-button strong { font-weight:600; }.image-upload-button small { display:none; }.image-upload-icon { font-size:17px; }.reasoning-effort { padding-inline:4px; }.chat-composer>small { display:none; }.image-preview { grid-column:1/-1; }
@keyframes chat-rise { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion:reduce) { .chat-message,.chat-welcome { animation:none; }.conversation-item,.chat-composer>button[type="submit"] { transition:none; } }
@media(max-width:760px) { .chat-shell { display:block; position:relative; overflow:hidden; height:100dvh; }.chat-sidebar { position:fixed; z-index:50; inset:0 auto 0 0; width:min(286px,88vw); padding-top:17px; border:0; box-shadow:15px 0 36px rgba(0,0,0,.14); transform:translateX(-104%); transition:transform .27s cubic-bezier(.2,.75,.25,1); }.chat-shell.sidebar-open .chat-sidebar { transform:translateX(0); }.chat-shell.sidebar-open::after { content:""; position:fixed; z-index:45; inset:0; background:rgba(0,0,0,.22); }.chat-sidebar-toggle { display:grid; }.chat-panel { height:100%; min-height:0; }.chat-header { padding:10px 14px; }.messages-stream { padding:16px 18px 20px; gap:18px; }.chat-welcome { padding-inline:12px; }.chat-welcome h2 { font-size:27px; }.chat-welcome p { font-size:14px; }.chat-message { width:100%; }.chat-message.user { max-width:88%; }.chat-composer { width:calc(100% - 20px); padding-bottom:max(12px,env(safe-area-inset-bottom)); }.chat-media-controls { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }.chat-media-controls::-webkit-scrollbar { display:none; }.chat-actions { display:none; } }