:root {
  --green: #9bc52b;
  --green-dark: #769d12;
  --green-soft: #f1f7df;
  --pink: #e40073;
  --ink: #1d2329;
  --muted: #69737d;
  --line: #e6e9ec;
  --surface: #ffffff;
  --canvas: #f5f7f8;
  --danger: #c53b50;
  --shadow: 0 18px 60px rgba(25, 35, 45, .10);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.material-icon { width: 20px; height: 20px; display: inline-block; flex: 0 0 auto; overflow: visible; fill: currentColor; vertical-align: middle; }
.icon-text { display: inline-flex; gap: 7px; align-items: center; justify-content: center; }
.eyebrow { color: var(--green-dark); font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.login-shell { display: grid; grid-template-columns: 44% 56%; min-height: 100vh; background: white; }
.login-brand { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; overflow: hidden; color: white; padding: 48px; background: linear-gradient(145deg, #8ab817, #add23c 68%, #cae175); }
.login-brand::before, .login-brand::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.login-brand::before { width: 520px; height: 520px; left: -240px; bottom: -250px; }
.login-brand::after { width: 380px; height: 380px; right: -210px; top: -180px; }
.brand-mark { width: 82px; height: 82px; border: 4px solid currentColor; border-radius: 24px; display: grid; place-content: center; gap: 5px; transform: rotate(-3deg); }
.brand-mark span { display: block; height: 7px; border-radius: 20px; background: currentColor; }
.brand-mark span:nth-child(1) { width: 34px; }
.brand-mark span:nth-child(2) { width: 45px; }
.brand-mark span:nth-child(3) { width: 27px; }
.brand-mark.small { width: 38px; height: 38px; border-width: 2px; border-radius: 11px; gap: 3px; color: var(--green); }
.brand-mark.small span { height: 3px; }
.brand-mark.small span:nth-child(1) { width: 17px; }.brand-mark.small span:nth-child(2) { width: 22px; }.brand-mark.small span:nth-child(3) { width: 13px; }
.brand-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.05em; white-space: nowrap; }
.brand-name span { font-weight: 400; }
.login-brand .brand-name { font-size: 2.5rem; }
.login-brand p { font-size: 1.2rem; line-height: 1.5; opacity: .9; }
.login-panel { display: grid; place-items: center; padding: 48px; }
.login-card { width: min(430px, 100%); }
.login-card h1 { font-size: 2.35rem; letter-spacing: -.045em; margin: 12px 0 8px; }
.login-card > .muted { margin: 0 0 30px; }
label { display: grid; gap: 8px; margin: 16px 0; color: #3d464d; font-size: .88rem; font-weight: 700; }
input, textarea, select { width: 100%; border: 1px solid #dce1e4; border-radius: 11px; padding: 12px 14px; color: var(--ink); background: #fff; outline: none; transition: .18s ease; }
input:focus, textarea:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(155,197,43,.15); }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.form-error { min-height: 24px; margin-top: 4px; color: var(--danger); font-size: .85rem; }
.security-note { text-align: center; color: #9aa1a7; font-size: .78rem; margin-top: 22px; }

.button { border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 750; transition: transform .15s, background .15s; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--green); color: #fff; box-shadow: 0 8px 22px rgba(126,163,30,.22); }
.button.primary:hover { background: var(--green-dark); }
.button.secondary { background: var(--green-soft); color: var(--green-dark); }
.button.ghost { background: #eef1f3; color: #48535d; }
.button.danger { background: #fff0f3; color: var(--danger); }
.button.wide { width: 100%; padding: 13px 16px; }
.button.small { padding: 8px 12px; font-size: .82rem; }
.icon-button { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; border-radius: 9px; padding: 0; background: transparent; color: inherit; font-size: 1.15rem; }
.icon-button:hover { background: rgba(0,0,0,.06); }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 250px; display: flex; flex-direction: column; z-index: 20; color: #e9edf0; background: #20272c; box-shadow: 4px 0 22px rgba(17,21,24,.08); }
.sidebar-brand { height: 76px; display: flex; align-items: center; gap: 11px; padding: 0 24px; color: white; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar nav { flex: 1; padding: 20px 12px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 13px; border: 0; border-radius: 10px; padding: 12px 14px; margin: 3px 0; color: #aeb8bf; background: transparent; font-weight: 650; text-align: left; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(155,197,43,.24), rgba(155,197,43,.08)); box-shadow: inset 3px 0 var(--green); }
.nav-icon { display: inline-grid; place-items: center; width: 22px; color: var(--green); }.nav-icon .material-icon { width: 21px; height: 21px; }
.sidebar-footer { display: grid; grid-template-columns: 38px 1fr 36px; gap: 10px; align-items: center; padding: 17px; border-top: 1px solid rgba(255,255,255,.07); }
.user-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: white; background: linear-gradient(145deg, var(--pink), #b80059); font-size: .78rem; font-weight: 800; }
.user-meta { display: grid; min-width: 0; }
.user-meta strong { overflow: hidden; text-overflow: ellipsis; font-size: .85rem; white-space: nowrap; }
.user-meta span { color: #8d9aa3; font-size: .72rem; text-transform: capitalize; }
.mobile-topbar { display: none; }
.main-content { min-height: 100vh; margin-left: 250px; padding: 30px; outline: none; }
.page-header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 25px; }
.page-header h1 { margin: 5px 0 0; font-size: 1.8rem; letter-spacing: -.035em; }
.page-header p { margin: 6px 0 0; color: var(--muted); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-card { padding: 17px 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.stat-card .stat-label { color: var(--muted); font-size: .78rem; font-weight: 700; }
.stat-card .stat-value { display: block; margin-top: 7px; font-size: 1.65rem; font-weight: 850; }
.stat-card .stat-dot { float: right; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px var(--green-soft); }
.stat-card.pink .stat-dot { background: var(--pink); box-shadow: 0 0 0 5px #fde5f1; }

.inbox { min-height: 570px; display: grid; grid-template-columns: 360px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 8px 30px rgba(24,33,40,.04); }
.conversation-pane { display: flex; min-width: 0; flex-direction: column; border-right: 1px solid var(--line); }
.conversation-tools { display: grid; gap: 10px; padding: 15px; border-bottom: 1px solid var(--line); }
.search-box { position: relative; }
.search-box input { padding-left: 36px; background: #f7f8f9; }
.search-box-icon { position: absolute; z-index: 1; left: 12px; top: 50%; width: 17px; height: 17px; color: #879099; transform: translateY(-50%); pointer-events: none; }
.search-box-icon .material-icon { width: 17px; height: 17px; }
.filter-row { display: flex; gap: 6px; overflow-x: auto; }
.filter-chip { border: 0; border-radius: 20px; padding: 7px 11px; color: #6e7880; background: #f0f2f3; font-size: .74rem; font-weight: 750; white-space: nowrap; }
.filter-chip.active { color: var(--green-dark); background: var(--green-soft); }
.conversation-list { flex: 1; overflow-y: auto; overflow-anchor: none; }
.conversation-list-spacer { display: block; width: 100%; min-height: 0; pointer-events: none; }
.conversation-list-more { display: flex; justify-content: center; padding: 12px 14px 18px; background: #fbfcf8; }
.conversation-list-more .button { width: 100%; justify-content: center; }
.conversation-item { width: 100%; display: grid; grid-template-columns: 44px 1fr auto; gap: 11px; align-items: center; border: 0; border-bottom: 1px solid #f0f2f3; padding: 13px 14px; background: white; text-align: left; }
.conversation-item:hover, .conversation-item.active { background: #f7faef; }
.conversation-item.active { box-shadow: inset 3px 0 var(--green); }
.contact-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #58626b; background: #e9edf0; font-size: .76rem; font-weight: 800; }
.conversation-copy { min-width: 0; }
.conversation-copy strong, .conversation-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-copy strong { font-size: .87rem; }
.conversation-copy span { margin-top: 4px; color: var(--muted); font-size: .76rem; }
.conversation-aside { display: grid; justify-items: end; gap: 5px; color: #98a0a6; font-size: .68rem; }
.conversation-timestamp { display: grid; justify-items: end; gap: 1px; color: inherit; line-height: 1; }
.conversation-date { color: #a6adb2; font-size: .54rem; font-weight: 700; letter-spacing: .01em; }
.conversation-time { color: #89939a; font-size: .68rem; }
.unread { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 20px; color: white; background: var(--pink); font-size: .68rem; font-weight: 800; }
.conversation-attention-counts { display: grid; justify-items: end; gap: 3px; }
.awaiting-reply { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 20px; color: #fff; background: #d92d45; font-size: .68rem; font-weight: 800; }
.chat-pane { min-width: 0; display: flex; flex-direction: column; background: #f5f7f4; }
.chat-header { min-height: 72px; display: flex; align-items: center; gap: 11px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: white; }
.chat-header-copy { flex: 1; min-width: 0; }
.chat-header-copy strong, .chat-header-copy span { display: block; }
.chat-header-copy span { margin-top: 3px; color: var(--muted); font-size: .75rem; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 6px 9px; color: #55760d; background: var(--green-soft); font-size: .7rem; font-weight: 800; }
.status-badge.waiting { color: #ae4f00; background: #fff1df; }.status-badge.resolved { color: #4d5962; background: #edf0f1; }
.messages { flex: 1; min-height: 390px; max-height: 520px; overflow-y: auto; padding: 23px; }
.chat-history-more { display: flex; width: 100%; align-items: center; justify-content: center; gap: 9px; padding: 4px 0 12px; }
.chat-history-more .button { border-color: #d8dfd6; background: rgba(255,255,255,.94); color: #52605a; box-shadow: 0 3px 12px rgba(23,48,33,.06); }
.chat-history-more small { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.chat-history-attention { display: inline-flex; gap: 3px; align-items: center; margin-left: 2px; }
.chat-history-attention i { min-width: 17px; height: 17px; display: inline-grid; place-items: center; border-radius: 50%; padding: 0 3px; color: #fff; font-size: .56rem; font-style: normal; font-weight: 850; line-height: 1; }
.chat-history-attention-unread { background: #2dab70; }
.chat-history-attention-awaiting { background: #d92d45; }
.message-row { display: flex; margin: 9px 0; }
.message-row.outbound { justify-content: flex-end; }
.message-bubble { position: relative; max-width: min(72%, 650px); border-radius: 6px 15px 15px 15px; padding: 10px 40px 7px 12px; color: #30383e; background: white; box-shadow: 0 2px 8px rgba(32,40,46,.07); line-height: 1.45; white-space: pre-wrap; }
.message-row.outbound .message-bubble { border-radius: 15px 6px 15px 15px; background: #e7f2c9; }
.message-meta { display: block; margin-top: 5px; color: #8a949b; font-size: .65rem; text-align: right; }
.message-delivery-receipt { display: inline-block; min-width: 11px; margin-left: 2px; font-weight: 850; letter-spacing: -2px; white-space: nowrap; }
.message-delivery-receipt.is-sending, .message-delivery-receipt.is-pending, .message-delivery-receipt.is-queued { letter-spacing: 0; }
.message-delivery-receipt.is-read { color: #70d8ff; text-shadow: 0 0 1px rgba(0,77,112,.4); }
.message-delivery-receipt.is-failed { border: 1px solid #f0bdc7; border-radius: 5px; padding: 2px 5px; color: #9e1b32; background: #fff1f3; letter-spacing: 0; white-space: normal; }
.message-delivery-failure { display: inline-flex; align-items: center; gap: 5px; margin-left: 3px; vertical-align: middle; white-space: nowrap; }
.message-retry-button { border: 1px solid #cf5068; border-radius: 6px; padding: 2px 7px; color: #8d1830; background: #fff; font: inherit; font-weight: 850; cursor: pointer; }
.message-retry-button:hover, .message-retry-button:focus-visible { border-color: #a7203a; color: #fff; background: #a7203a; outline: none; }
.message-retry-button:disabled { border-color: #d6aab3; color: #7a676b; background: #f4eaec; cursor: wait; opacity: .78; }
.operator-messages .message-retry-button { border-color: rgba(255,255,255,.82); color: #8d1830; background: #fff; }
.operator-messages .message-retry-button:hover, .operator-messages .message-retry-button:focus-visible { color: #fff; background: #8d1830; }
.message-edited-label { font-style: normal; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; padding: 14px; border-top: 1px solid var(--line); background: white; }
.composer textarea { min-height: 46px; max-height: 130px; margin: 0; }
.inbox-launcher { min-height: 330px; display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: 42px; align-items: center; padding: 42px; }
.inbox-launcher h2 { margin: 0 0 10px; font-size: 1.55rem; }.inbox-launcher p { max-width: 620px; margin: 0 0 24px; color: var(--muted); line-height: 1.65; }
.inbox-launch-visual { position: relative; min-height: 220px; overflow: hidden; border: 1px solid #dfe6d4; border-radius: 18px; background: linear-gradient(135deg, #edf5e3, #f9fbf6); }
.inbox-launch-visual > span { position: absolute; inset: 34px auto auto 34px; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: white; background: #217052; font-size: 1.7rem; }
.inbox-launch-visual i { position: absolute; right: 30px; height: 36px; border-radius: 12px; background: white; box-shadow: 0 5px 18px rgba(35,63,48,.08); }
.inbox-launch-visual i:nth-of-type(1) { top: 42px; width: 48%; }.inbox-launch-visual i:nth-of-type(2) { top: 94px; width: 62%; }.inbox-launch-visual i:nth-of-type(3) { top: 146px; width: 40%; background: #43ad79; }

.operator-inbox-mode { overflow: hidden; background: #f5f6f1; }
.operator-inbox-mode .sidebar, .operator-inbox-mode .mobile-topbar { display: none !important; }
.operator-inbox-mode .main-content { width: 100%; height: 100vh; min-height: 0; margin: 0; padding: 0; }
.operator-inbox-mode .app-shell { min-height: 0; height: 100vh; }
.operator-inbox { display: grid; grid-template-columns: 390px minmax(0, 1fr); width: 100%; height: 100vh; overflow: hidden; border-top: 3px solid #193e31; background: #f7f8f4; }
.operator-list-pane { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border-right: 1px solid #dfe4dc; background: #fbfcf8; }
.operator-brand { min-height: 76px; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e5e9e1; }
.operator-brand-emoji { position: relative; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 11px; padding: 0; background: transparent; cursor: pointer; }
.operator-brand-emoji:hover, .operator-brand-emoji:focus-visible { outline: 2px solid rgba(155,197,43,.5); outline-offset: 3px; }
.operator-brand-emoji > span { position: absolute; right: -5px; bottom: -5px; min-width: 21px; height: 21px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; background: #f2f7ec; font-family: "Segoe UI Emoji", sans-serif; font-size: .76rem; box-shadow: 0 2px 8px rgba(27,52,39,.18); }
.operator-brand-emoji > span:empty { display: none; }
.operator-brand > div:nth-child(2) { min-width: 0; }.operator-brand small { display: block; margin-top: 2px; color: #7e8981; font-size: .68rem; }
.operator-account { display: flex; gap: 8px; align-items: center; margin-left: auto; min-width: 0; }
.operator-account > span:nth-child(2) { display: grid; min-width: 0; }.operator-account strong { max-width: 92px; overflow: hidden; text-overflow: ellipsis; font-size: .74rem; white-space: nowrap; }
.operator-account .small-avatar { width: 34px; height: 34px; flex: 0 0 auto; }
.operator-list-tools { display: grid; gap: 12px; padding: 14px 14px 10px; border-bottom: 1px solid #e5e9e1; }
.operator-list-tools .search-box input { height: 42px; border-color: #dfe4dc; border-radius: 13px; background: #f7f9f5; }
.operator-list-title { display: flex; justify-content: space-between; align-items: center; }
.operator-list-title strong, .operator-list-title span { display: block; }.operator-list-title strong { font-size: 1rem; }.operator-list-title span { margin-top: 3px; color: #7f8982; font-size: .72rem; }
.operator-list-tools .filter-row { padding-bottom: 2px; transition: .2s; }.operator-list-tools .filter-row.compact-hidden { display: none; }
.operator-list-tools .filter-chip.active { color: #176c4a; background: #dff1e7; }
.operator-list-pane .conversation-list { min-height: 0; }
.operator-conversation-item { min-height: 86px; grid-template-columns: 48px 1fr auto; border-bottom-color: #edf0eb; padding: 12px 14px; background: #fbfcf8; }
.operator-conversation-item:hover { background: #f0f6ef; }.operator-conversation-item.active { background: #e1efe4; box-shadow: inset 3px 0 #247653; }
.operator-conversation-item .contact-avatar { width: 46px; height: 46px; color: #eef7f1; background: #405e52; }
.operator-conversation-item .conversation-copy strong { color: #26332d; font-size: .9rem; }
.operator-conversation-item .conversation-copy > span { max-width: 220px; color: #66736c; font-size: .78rem; }
.operator-conversation-item .conversation-copy small { display: flex; gap: 5px; align-items: center; margin-top: 6px; color: #8b958f; font-size: .64rem; }
.channel-arrow { width: 0; height: 0; flex: 0 0 auto; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid #a5ada8; }
.operator-conversation-item .unread { background: #2dab70; }
.operator-conversation-item .awaiting-reply { background: #d92d45; }
.operator-chat-pane { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #f4f5f0; }
.operator-chat-header { min-height: 72px; flex: 0 0 auto; padding: 10px 18px; border-color: #dde3da; background: #fbfcf8; }
.operator-chat-header .contact-avatar { color: #eef7f1; background: #405e52; }
.operator-chat-header .button.primary { background: #2175c5; box-shadow: none; }.operator-chat-header .button.primary:hover { background: #155f9f; }
.message-order-toggle { width: 36px; min-width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid #d9e1da; color: #66736c; background: #fff; }
.message-order-toggle:hover, .message-order-toggle:focus-visible { border-color: #9fc276; color: #315f17; background: #f4faeb; }
.message-order-toggle .material-icon { width: 19px; height: 19px; transition: transform .18s ease; }
.message-order-toggle.newest-first .material-icon { transform: rotate(180deg); }
.operator-messages { min-height: 0; max-height: none; overflow-x: hidden; overflow-y: scroll; padding: 26px 3.5%; scrollbar-gutter: stable; overscroll-behavior-y: contain; touch-action: pan-y; background-color: #f4f5f0; background-image: radial-gradient(rgba(37,78,59,.045) .7px, transparent .7px); background-size: 12px 12px; }
.operator-messages::-webkit-scrollbar, .contact-modal::-webkit-scrollbar { width: 10px; }
.operator-messages::-webkit-scrollbar-track, .contact-modal::-webkit-scrollbar-track { background: #e9eee8; }
.operator-messages::-webkit-scrollbar-thumb, .contact-modal::-webkit-scrollbar-thumb { border: 2px solid #e9eee8; border-radius: 10px; background: #779181; }
.operator-messages .message-row { margin: 12px 0; }
.operator-messages .message-bubble { max-width: min(72%, 760px); border: 1px solid #dfe5dc; border-radius: 6px 15px 15px 15px; padding: 11px 40px 8px 13px; box-shadow: 0 2px 5px rgba(29,52,41,.04); background: #fafbf7; }
.operator-messages .message-row.outbound .message-bubble { border-color: #3ea873; border-radius: 15px 6px 15px 15px; color: #fff; background: #3eaa74; }
.operator-messages .message-row.outbound .message-meta { color: rgba(255,255,255,.78); }
.operator-messages .message-row.outbound .message-author, .operator-messages .message-row.outbound .message-rich-text, .operator-messages .message-row.outbound .message-rich-text a { color: #fff; }
.message-author { display: block; margin-bottom: 4px; font-size: .68rem; }
.operator-composer { position: relative; flex: 0 0 auto; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; padding: 11px 18px; background: #fbfcf8; }
.operator-composer textarea { min-height: 44px; max-height: 52vh; padding: 11px 16px; border-radius: 24px; resize: none; background: #f8faf6; }
.composer-tool { color: #299466; font-size: 1.1rem; }.send-button { width: 44px; min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; padding: 0; box-shadow: none !important; background: #25855e !important; }
.button.icon-only { width: 36px; min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0; }
.chat-context-strip { flex: 0 0 auto; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap: 10px; max-height: 238px; overflow: auto; border-bottom: 1px solid #dce3da; padding: 10px 18px; background: #f8faf5; }
.chat-postit, .chat-department-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; border: 1px solid rgba(88,96,53,.18); border-radius: 12px; padding: 11px 12px; box-shadow: 0 5px 14px rgba(42,55,38,.06); }
.chat-postit { background: linear-gradient(145deg, #fff7b9, #fff1a0); }
.chat-department-info { background: linear-gradient(145deg, #edf7ee, #e5f3e9); }
.chat-context-title { grid-column: 1 / -1; display: flex; gap: 9px; align-items: center; }
.chat-context-title > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #4a5b28; background: rgba(255,255,255,.64); font-size: .85rem; }
.chat-context-title strong, .chat-context-title small { display: block; }.chat-context-title strong { color: #354035; font-size: .78rem; }.chat-context-title small { margin-top: 2px; color: #758077; font-size: .62rem; }
.chat-context-strip textarea { grid-column: 1 / -1; min-height: 54px; margin: 0; border-color: rgba(75,91,60,.18); padding: 8px 10px; background: rgba(255,255,255,.7); font-size: .75rem; line-height: 1.4; resize: vertical; }
.chat-context-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.chat-context-actions small, .chat-department-info > small { color: #758077; font-size: .6rem; }
.chat-context-actions .button { flex: 0 0 auto; padding: 7px 10px; }
.department-info-copy { grid-column: 1 / -1; margin: 0; color: #46534b; font-size: .74rem; line-height: 1.45; white-space: pre-wrap; }
.quick-reply-wrap, .chat-more-wrap { position: relative; }
.quick-reply-menu, .chat-action-menu { position: absolute; z-index: 20; display: grid; overflow: hidden; border: 1px solid #dfe5dc; border-radius: 12px; background: white; box-shadow: 0 15px 38px rgba(28,46,37,.16); }
.quick-reply-menu { left: 0; bottom: 50px; width: 320px; }.quick-reply-menu strong { padding: 11px 13px; border-bottom: 1px solid #edf0eb; font-size: .75rem; }
.quick-reply-menu button, .chat-action-menu button { border: 0; padding: 11px 13px; color: #3c4942; background: white; text-align: left; font-size: .78rem; }.quick-reply-menu button:hover, .chat-action-menu button:hover { background: #edf6f0; }
.chat-action-menu { top: 42px; right: 0; width: 210px; }.chat-more-wrap { flex: 0 0 auto; }
.chat-action-menu .icon-text { justify-content: flex-start; gap: 8px; }
.chat-action-menu .material-icon { width: 17px; height: 17px; }
.empty-state { flex: 1; display: grid; place-items: center; padding: 40px; color: var(--muted); text-align: center; }
.empty-state .empty-icon { width: 68px; height: 68px; display: grid; place-items: center; margin: auto auto 14px; border-radius: 22px; color: var(--green-dark); background: var(--green-soft); font-size: 1.8rem; }

.card { border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: white; }
.card h2, .card h3 { margin-top: 0; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.settings-grid .full { grid-column: 1 / -1; }
.section-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 15px; }
.section-title h2 { margin: 0; font-size: 1.05rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .full { grid-column: 1 / -1; }
.secret-hint { color: var(--muted); font-size: .74rem; font-weight: 500; }
.toggle-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 0; }
.toggle-row strong, .toggle-row span { display: block; }.toggle-row span { color: var(--muted); font-size: .78rem; margin-top: 3px; }
.toggle { appearance: none; width: 45px; height: 25px; flex: 0 0 auto; border: 0; border-radius: 30px; padding: 3px; background: #cbd1d5; }
.toggle::before { content: ""; display: block; width: 19px; height: 19px; border-radius: 50%; background: white; box-shadow: 0 2px 4px rgba(0,0,0,.17); transition: .2s; }
.toggle:checked { background: var(--green); }.toggle:checked::before { transform: translateX(20px); }
.provider-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.provider-card { position: relative; display: block; margin: 0; }
.provider-card input { position: absolute; opacity: 0; }
.provider-card div { height: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: white; }
.provider-card input:checked + div { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.provider-card strong, .provider-card span { display: block; }.provider-card span { margin-top: 5px; color: var(--muted); font-size: .74rem; font-weight: 500; }
.webhook-box { display: flex; gap: 8px; align-items: center; border: 1px dashed #cfd7db; border-radius: 10px; padding: 10px; background: #f8fafb; }
.webhook-box code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #59646c; font-size: .76rem; }
.webhook-box input { flex: 1; min-width: 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
.evolution-connection { display: flex; gap: 15px; align-items: center; margin-top: 12px; border-radius: 12px; color: #4c621d; background: var(--green-soft); }
.evolution-connection:not(:empty) { padding: 13px; border: 1px solid #dbe8bc; }
.evolution-connection strong, .evolution-connection span { display: block; }
.evolution-connection span { margin-top: 3px; font-size: .76rem; }
.evolution-connection img { width: 190px; height: 190px; margin-left: auto; border: 8px solid white; border-radius: 10px; image-rendering: pixelated; }
.evolution-connection small { display: block; margin-top: 8px; color: #66734b; }
.evolution-pairing-row { display: flex; align-items: end; gap: 10px; margin-top: 16px; }
.evolution-pairing-row label { flex: 1; min-width: 0; margin: 0; }
.evolution-pairing-row input { margin-bottom: 0; }
.evolution-pairing-row button { flex: 0 0 auto; }
.evolution-pairing-code { display: inline-block; margin-top: 12px; padding: 9px 14px; border: 1px solid #b6d36c; border-radius: 9px; background: white; color: #273e09; font-size: 1.35rem; font-weight: 800; letter-spacing: .18em; user-select: all; }
.evolution-connection #copyEvolutionPairingCode { margin-top: 10px; }
@media (max-width: 550px) { .evolution-pairing-row { align-items: stretch; flex-direction: column; } .evolution-pairing-row button { align-self: flex-start; } }
.connection-help { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 10px; color: var(--muted); font-size: .78rem; }
.connection-help span { max-width: 72%; }
.button-group { display: flex; gap: 8px; flex-wrap: wrap; }
.typebot-hub { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 18px; }
.typebot-main-card { min-height: 430px; }
.typebot-logo { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 15px; background: #0042da; color: white; font-size: 1.5rem; font-weight: 800; }
.integration-state { display: flex; gap: 12px; align-items: center; margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafb; }
.integration-state strong, .integration-state span { display: block; }
.integration-state span { margin-top: 3px; color: var(--muted); font-size: .8rem; }
.integration-state.success { border-color: #d8e8bd; background: var(--green-soft); }
.integration-state.warning { border-color: #f0dfae; background: #fff9e8; }
.integration-state.error { border-color: #f0c6c6; background: #fff4f4; }
.status-dot-large { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: #a5afb5; box-shadow: 0 0 0 5px rgba(165,175,181,.15); }
.success .status-dot-large { background: var(--green); box-shadow: 0 0 0 5px rgba(151,188,75,.2); }
.warning .status-dot-large { background: #e3a92e; box-shadow: 0 0 0 5px rgba(227,169,46,.16); }
.typebot-steps { display: grid; gap: 0; margin: 24px 0; }
.step { position: relative; display: flex; gap: 13px; min-height: 76px; color: var(--muted); }
.step:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 35px; bottom: 2px; width: 2px; background: #dfe5e8; }
.step b { z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: #e8edef; color: #7c888e; }
.step.done b { background: var(--green); color: white; }
.step span, .step strong, .step small { display: block; }
.step strong { color: var(--ink); }
.step small { margin-top: 4px; line-height: 1.35; }
.typebot-side-card p, .sync-rule { color: var(--muted); font-size: .86rem; line-height: 1.55; }
.sync-rule { margin: 22px 0; padding: 14px; border-radius: 11px; background: #f5f8f9; }
.sync-rule strong, .sync-rule span { display: block; }
.sync-rule strong { color: var(--ink); margin-bottom: 4px; }
.typebot-list { display: grid; gap: 8px; margin-top: 14px; }
.typebot-choice { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); text-align: left; cursor: pointer; }
.typebot-choice:hover { border-color: var(--green); background: var(--green-soft); }
.typebot-choice span, .typebot-choice strong, .typebot-choice small { display: block; }
.typebot-choice small { margin-top: 3px; color: var(--muted); }

.flow-canvas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 18px; padding: 30px; border: 1px solid var(--line); border-radius: 15px; background-image: radial-gradient(#dce2e5 1px, transparent 1px); background-size: 18px 18px; background-color: white; }
.flow-node { position: relative; min-height: 120px; border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: 12px; padding: 15px; background: white; box-shadow: 0 8px 24px rgba(26,36,42,.07); }
.flow-node::after { content: "↓"; position: absolute; left: 50%; bottom: -36px; color: #a9b1b6; font-size: 1.2rem; }
.flow-node:nth-last-child(-n+3)::after { display: none; }
.flow-node.human { border-top-color: var(--pink); }
.flow-node .node-index { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: var(--green-dark); background: var(--green-soft); font-size: .7rem; font-weight: 850; }
.flow-node h3 { margin: 10px 0 6px; font-size: .9rem; }.flow-node p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.flow-legend { display: flex; gap: 16px; margin: 14px 0 0; color: var(--muted); font-size: .75rem; }.legend-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--green); }.legend-dot.pink { background: var(--pink); }

.flow-editor-loading { min-height: 420px; display: grid; place-items: center; color: var(--muted); }
.flow-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
.flow-workspace { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 8px 28px rgba(26,36,42,.06); }
.flow-toolbar { min-height: 50px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #fbfcfc; }
.flow-toolbar .spacer { flex: 1; }
.flow-viewport { height: 680px; overflow: auto; background-color: #f7f9f9; background-image: radial-gradient(#cfd7d9 1px, transparent 1px); background-size: 19px 19px; }
.flow-surface { position: relative; width: 1800px; height: 1050px; }
.flow-svg, #flowNodeLayer { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-svg { z-index: 1; pointer-events: none; overflow: visible; }
.flow-svg marker path { fill: #819f3a; }
.flow-edge { fill: none; stroke: #819f3a; stroke-width: 2.2; }
.flow-edge-label { fill: #647078; paint-order: stroke; stroke: #f7f9f9; stroke-width: 5px; stroke-linejoin: round; font-size: 12px; font-weight: 800; }
#flowNodeLayer { z-index: 2; pointer-events: none; }
.flow-block { position: absolute; width: 244px; min-height: 112px; pointer-events: auto; border: 1px solid #d5dcdf; border-top: 4px solid var(--green); border-radius: 12px; background: white; box-shadow: 0 9px 24px rgba(26,36,42,.11); user-select: none; }
.flow-block.type-start { border-top-color: #66757f; }
.flow-block.type-menu { border-top-color: #6f9231; }
.flow-block.type-handoff { border-top-color: var(--pink); }
.flow-block.selected { outline: 3px solid rgba(151,188,75,.32); border-color: #94b64f; }
.flow-block.connecting { box-shadow: 0 0 0 4px rgba(151,188,75,.25), 0 9px 24px rgba(26,36,42,.11); }
.flow-block-head { display: flex; gap: 9px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #edf0f1; cursor: grab; }
.flow-block-head:active { cursor: grabbing; }
.flow-block-icon { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: var(--green-dark); background: var(--green-soft); font-size: .82rem; font-weight: 900; }
.type-handoff .flow-block-icon { color: #98345a; background: #fbe5ed; }
.type-start .flow-block-icon { color: #4e5b63; background: #edf1f3; }
.flow-block-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.flow-block-body { padding: 10px 12px 13px; color: var(--muted); font-size: .73rem; line-height: 1.42; white-space: pre-line; }
.flow-block-id { display: block; margin-top: 6px; color: #a0a8ad; font: .65rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.flow-port { position: absolute; z-index: 3; width: 14px; height: 14px; display: block; border: 3px solid white; border-radius: 50%; background: #849f46; box-shadow: 0 0 0 1px #718b38; cursor: crosshair; }
.flow-port.input { left: -8px; top: 49%; }
.flow-port.output { right: -8px; top: 49%; }
.flow-port:hover { transform: scale(1.28); }
.flow-inspector { min-width: 0; max-height: 730px; overflow: auto; border: 1px solid var(--line); border-radius: 15px; padding: 16px; background: white; }
.inspector-title { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 14px; }
.inspector-title h3 { margin: 0; font-size: .96rem; }
.inspector-title code { color: #7c878d; font-size: .68rem; }
.inspector-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.inspector-section h4 { margin: 0 0 9px; font-size: .8rem; }
.route-editor { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 6px; align-items: center; margin-bottom: 7px; }
.route-editor input, .route-editor select { min-width: 0; margin: 0; padding: 8px 7px; font-size: .72rem; }
.route-editor button { width: 32px; height: 32px; padding: 0; }
.inspector-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 18px; }

.team-list { display: grid; gap: 10px; }
.team-item { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 13px; }
.team-item.inactive, .department-item.inactive { opacity: .58; background: #f5f6f7; }
.team-item strong, .team-item span { display: block; }.team-item > .team-copy > span { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.department-tag.service-hours-summary { border-color: #d9e4dd; color: #52645a; background: #f5f8f5; }
.service-hours-form { display: grid; gap: 16px; }
.service-hours-toggle { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 11px; align-items: start; border: 1px solid #dce6de; border-radius: 12px; padding: 13px; background: #f8fbf7; }
.service-hours-toggle input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--green); }
.service-hours-toggle strong, .service-hours-toggle small { display: block; }
.service-hours-toggle strong { font-size: .82rem; }.service-hours-toggle small { margin-top: 3px; color: var(--muted); font-size: .7rem; line-height: 1.4; }
.service-hours-fields { display: grid; gap: 14px; margin: 0; border: 1px solid #dce6de; border-radius: 12px; padding: 13px; }
.service-hours-fields:disabled { opacity: .48; }
.contact-department-field select:disabled { cursor: not-allowed; border-color: #d8dfda; color: #69736d; background: #eef1ef; opacity: .78; }
.service-hours-fields legend { padding: 0 6px; color: #59685f; font-size: .7rem; font-weight: 800; }
.service-hours-weekdays { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 7px; }
.service-hours-weekdays label { position: relative; margin: 0; }
.service-hours-weekdays input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.service-hours-weekdays span { display: grid; place-items: center; min-height: 39px; border: 1px solid #d8e1da; border-radius: 9px; color: #637168; background: white; font-size: .68rem; font-weight: 800; }
.service-hours-weekdays input:checked + span { border-color: #8fca22; color: #3f6205; background: #edffd0; box-shadow: inset 0 0 0 1px #8fca22; }
.service-hours-weekdays input:focus-visible + span { outline: 3px solid rgba(143,202,34,.24); outline-offset: 2px; }
.service-hours-times { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.service-hours-times label { margin: 0; color: #59685f; font-size: .7rem; font-weight: 800; }
.service-hours-times input { margin-top: 5px; }
.service-hours-note { margin: 0; }
.role-pill { border-radius: 20px; padding: 6px 9px; color: #52606a; background: #eef1f3; font-size: .7rem; font-weight: 800; text-transform: capitalize; }
.role-pill.role-superadmin { color: #73318d; background: #f3e7f8; }.role-pill.role-manager { color: #1d5f9d; background: #e6f1fb; }.role-pill.role-operator { color: #386713; background: #eaf4dd; }
.department-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.department-tag { display: inline-flex !important; width: fit-content; border-radius: 20px; padding: 4px 8px; color: #3f664d !important; background: #e9f3eb; font-size: .65rem !important; font-weight: 750; }
.department-tag.neutral { color: #69747b !important; background: #eef1f3; }
.department-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.department-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; }
.department-item strong, .department-item span { display: block; }.department-item > div > span { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.department-info-editor { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; border-top: 1px dashed #dce4da; padding-top: 10px; }
.department-info-editor label { margin: 0; color: #5c6961; font-size: .68rem; font-weight: 750; }
.department-info-editor textarea { min-height: 70px; margin: 5px 0 0; padding: 9px 10px; font-size: .75rem; resize: vertical; }
.department-info-editor .button { margin-bottom: 1px; }
.department-info-readonly { grid-column: 1 / -1; margin: 0; border-top: 1px dashed #dce4da; padding-top: 10px; color: #69756e; font-size: .74rem; line-height: 1.45; white-space: pre-wrap; }
.team-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.team-summary article { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: white; box-shadow: 0 5px 18px rgba(23,37,46,.04); }
.team-summary strong, .team-summary span { display: block; }.team-summary strong { color: var(--green-dark); font-size: 1.6rem; }.team-summary span { margin-top: 4px; color: var(--muted); font-size: .75rem; }
.inline-form { display: flex; gap: 8px; align-items: center; }.inline-form input { min-width: 220px; margin: 0; }
.department-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 3px 0 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.department-options legend { padding: 0 6px; color: var(--muted); font-size: .74rem; font-weight: 750; }
.department-options label, .active-check { display: inline-flex; gap: 7px; align-items: center; border-radius: 9px; padding: 8px 10px; background: #f4f7f0; font-size: .78rem; font-weight: 700; }
.department-options input, .active-check input { width: auto; margin: 0; }
.department-filter { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; color: #6e7b73; font-size: .7rem; font-weight: 750; }.department-filter select { min-width: 0; margin: 0; padding: 8px 10px; font-size: .75rem; }
.transfer-panel { display: grid; grid-template-columns: minmax(150px, .82fr) minmax(140px, .72fr) minmax(170px, .88fr) minmax(225px, 1.28fr) minmax(88px, auto); gap: 9px 11px; align-items: center; border-bottom: 1px solid #d7e2d8; padding: 10px 14px; background: linear-gradient(120deg, #f7faf7 0%, #eef6f0 100%); box-shadow: inset 4px 0 0 var(--green); }
.transfer-panel.without-assignee { grid-template-columns: minmax(160px, .8fr) minmax(160px, .78fr) minmax(260px, 1.35fr) minmax(88px, auto); }
.transfer-intro { min-width: 0; padding-right: 3px; }.transfer-panel strong, .transfer-panel span { display: block; }.transfer-intro strong { font-size: .86rem; line-height: 1.2; }.transfer-panel span { margin-top: 2px; color: var(--muted); font-size: .66rem; line-height: 1.35; }
.transfer-panel label { min-width: 0; margin: 0; color: #4f5c54; font-size: .67rem; }.transfer-panel select, .transfer-panel textarea { margin: 5px 0 0; padding: 8px 10px; font-size: .74rem; }.transfer-panel select { height: 38px; }.transfer-panel textarea { min-height: 48px; max-height: 92px; resize: vertical; }
.transfer-reason-field.required textarea { border-color: #d97706; box-shadow: 0 0 0 2px rgba(217,119,6,.08); }.transfer-reason-field.required textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(155,197,43,.15); }
.transfer-actions { display: grid; gap: 6px; min-width: 88px; }.transfer-actions .button { width: 100%; padding-inline: 10px; }
.urgent-flag { display: inline-flex !important; width: fit-content; align-items: center; border-radius: 20px; padding: 3px 7px; color: #a52a13 !important; background: #ffe6dc; font-size: .62rem !important; font-style: normal; font-weight: 850; white-space: nowrap; }
.contact-edit-trigger, .chat-contact-button, .contact-button { cursor: pointer; }
.contact-button { flex: 0 0 auto; border: 0; padding: 0; }
.chat-contact-button { flex: 1; min-width: 0; border: 0; padding: 0; color: inherit; background: transparent; text-align: left; }
.chat-contact-button strong, .chat-contact-button span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.chat-contact-button span { margin-top: 3px; color: var(--muted); font-size: .75rem; }
.message-row.internal { justify-content: center; }
.internal-message { width: min(86%, 720px); border: 1px solid #d5dbe0; border-radius: 12px; padding: 10px 14px; color: #56616a; background: rgba(239,242,244,.92); text-align: center; }
.internal-message strong, .internal-message span, .internal-message small { display: block; }.internal-message strong { color: #46515a; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }.internal-message span { margin-top: 4px; font-size: .76rem; line-height: 1.45; }.internal-message small { margin-top: 5px; color: #87919a; font-size: .63rem; }

.brand-favicon { width: 38px; height: 38px; flex: 0 0 auto; object-fit: contain; border-radius: 10px; }
.login-favicon { width: 92px; height: 92px; border-radius: 22px; }
.profile-favicon { border: 0; padding: 4px; object-fit: contain; background: #8cff00 !important; }
.contact-avatar { color: transparent !important; background: #f1f4ef !important; }
.contact-photo { display: block; padding: 0; border: 1px solid #dce4dc; object-fit: cover; object-position: center; overflow: hidden; }
.contact-photo[data-profile-lightbox] { cursor: zoom-in; }
.access-backoffice { display: block; text-align: center; text-decoration: none; }
.sidebar-footer { grid-template-columns: 38px 1fr; }
.stronger-outline { border: 1px solid #b8c5bd !important; }
.operator-list-tools { gap: 7px; padding: 10px 12px 7px; }
.operator-list-tools .search-box input { height: 38px; }
.department-filter { margin: 0; }
.operator-list-title { margin-top: 1px; }
.inbox-filter-panel { display: grid; gap: 8px; }
.inbox-filter-panel.compact-hidden { display: none; }
.advanced-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.advanced-filters label { margin: 0; gap: 3px; font-size: .64rem; }
.advanced-filters select { margin: 0; padding: 7px 8px; font-size: .7rem; }
.advanced-filters .checkbox-filter { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }
.checkbox-filter input { width: auto; }
.operator-conversation-item { min-height: 70px; grid-template-columns: 40px 1fr auto; padding: 8px 12px; }
.operator-conversation-item .contact-avatar { width: 38px; height: 38px; }
.operator-conversation-item .conversation-copy small { margin-top: 3px; }
.conversation-list-markers { display: flex; gap: 5px; align-items: center; min-width: 0; }
.operator-conversation-item .conversation-copy .triage-list-label { width: fit-content; margin: 0; border-radius: 999px; padding: 2px 7px; color: #a70a5d; background: #fff0f7; font-size: .58rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.conversation-flag-label { max-width: 100%; display: inline-flex !important; gap: 3px; align-items: center; margin: 0 !important; border-radius: 999px; padding: 2px 7px; background: #f1f4f2; font-size: .58rem !important; font-weight: 850; }
.conversation-flag-label .material-icon { flex: 0 0 auto; width: 12px; height: 12px; }
.conversation-flag-label b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.triage-window-badge { flex: 0 0 auto; border: 1px solid #c9dfb4; border-radius: 999px; padding: 5px 9px; color: #3f641c; background: #f0f8e7; font-size: .63rem; font-weight: 850; white-space: nowrap; }
.triage-window-badge.is-waiting { border-color: #d9dfe0; color: #607069; background: #f4f6f5; }
.triage-window-badge.is-expired { border-color: #f0c5cf; color: #a52b48; background: #fff1f4; }
.conversation-flag-indicator { width: 18px; height: 18px; display: grid !important; place-items: center; margin: 0 !important; border: 1px solid currentColor; border-radius: 50%; }
.conversation-flag-indicator .material-icon { width: 13px; height: 13px; }
.conversation-flag-indicator.flag-urgent, .conversation-flag-label.flag-urgent, .flag-option.flag-urgent { color: #d92d45 !important; background: #fff0f2; }
.conversation-flag-indicator.flag-follow_up, .conversation-flag-label.flag-follow_up, .flag-option.flag-follow_up { color: #e07816 !important; background: #fff7e8; }
.conversation-flag-indicator.flag-candidate, .conversation-flag-label.flag-candidate, .flag-option.flag-candidate { color: #079abe !important; background: #eafaff; }
.conversation-flag-indicator.flag-company, .conversation-flag-label.flag-company, .flag-option.flag-company { color: #42a91c !important; background: #f0fae9; }
.conversation-flag-indicator.flag-document_pending, .conversation-flag-label.flag-document_pending, .flag-option.flag-document_pending { color: #c60062 !important; background: #fff0f7; }
.conversation-flag-indicator.flag-new_client, .conversation-flag-label.flag-new_client, .flag-option.flag-new_client { color: #7654c8 !important; background: #f5f0ff; }
.conversation-flag-indicator.flag-blacklist, .conversation-flag-label.flag-blacklist, .flag-option.flag-blacklist { border-color: #111 !important; color: #fff !important; background: #111 !important; }
.flag-reason-tooltip { position: fixed; z-index: 2147483647; width: max-content; max-width: min(360px, calc(100vw - 16px)); overflow: visible; pointer-events: auto; }
.flag-reason-tooltip-content { max-width: inherit; max-height: min(50vh, calc(100vh - 16px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-radius: 9px; padding: 8px 10px; color: #fff; background: #111; box-shadow: 0 10px 28px rgba(0,0,0,.28); font-size: .7rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.flag-reason-tooltip::after { content: ""; position: absolute; left: var(--flag-tooltip-arrow-left, 50%); top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #111; }
.flag-reason-tooltip.place-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #111; }
.operator-brand-actions { display: flex; gap: 5px; align-items: center; margin-left: auto; }
.collapse-list, .toggle-conversation-search { border: 1px solid #d7dfd8; }
.toggle-conversation-search[aria-expanded="true"] { border-color: #86b83e; color: #315f17; background: #eff8e5; }
.mark-all-read { width: 36px; min-width: 36px; height: 34px; border: 1px solid #b8c5bd; color: #356a16; background: #f6faef; }
.mark-all-read:hover, .mark-all-read:focus-visible { border-color: #80b935; color: #fff; background: #73a92e; outline: none; }
.mark-all-read .material-icon { width: 19px; height: 19px; }
.operator-inbox.list-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.operator-inbox.list-collapsed .operator-list-pane { visibility: hidden; pointer-events: none; }
.expand-list { position: fixed; z-index: 35; left: 0; top: 50%; width: 28px; height: 64px; border: 1px solid #cfddd2; border-left: 0; border-radius: 0 12px 12px 0; color: #176c4a; background: white; box-shadow: 3px 4px 18px rgba(29,52,41,.12); font-size: 1.35rem; }
.operator-composer { grid-template-columns: repeat(5, 34px) minmax(0, 1fr) auto; gap: 2px; padding-inline: 14px; }
.operator-composer .composer-tool { width: 32px; height: 32px; margin: 0; border-radius: 8px; }
.operator-composer .expandable-composer-field { margin-left: 5px; }
.attach-button { display: grid; place-items: center; margin: 0; font-weight: 400; }
.attach-button input { display: none; }
.emoji-palette button { border: 0; border-radius: 7px; padding: 6px; background: #f5f7f4; }
.quick-reply-menu { overflow: visible; border-color: #aebdb4; }
.quick-reply-menu.slash-mode { left: 40px; width: min(420px, calc(100vw - 130px)); }
.quick-reply-menu > strong { display: block; }
.quick-reply-list { max-height: 280px; overflow: auto; }
.quick-reply-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border-bottom: 1px solid #eef2ed; }
.quick-reply-item { min-width: 0; width: 100%; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.quick-reply-actions { display: flex; align-items: center; padding: 4px 5px 4px 0; }
.quick-reply-actions button { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px !important; padding: 0 !important; color: #5b6a62 !important; }
.quick-reply-actions button:hover { color: #176c4a !important; background: #eaf5ee !important; }
.quick-reply-actions button:last-child:hover { color: #b3234f !important; background: #fff0f4 !important; }
.quick-reply-actions .material-icon { width: 16px; height: 16px; }
.quick-reply-item span, .quick-reply-item strong, .quick-reply-item small { display: block; }
.quick-reply-item small { max-width: 220px; margin-top: 3px; overflow: hidden; color: #7c8780; text-overflow: ellipsis; white-space: nowrap; }
.quick-reply-thumb { position: relative; width: 34px; height: 34px; flex: 0 0 auto; }
.quick-reply-thumb > img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; }
.quick-reply-thumb b { position: absolute; z-index: 60; display: none; right: -270px; bottom: -20px; width: 250px; border: 5px solid white; border-radius: 12px; background: white; box-shadow: 0 16px 45px rgba(21,32,27,.24); }
.quick-reply-thumb b img { display: block; width: 100%; max-height: 260px; border-radius: 8px; object-fit: contain; }
.quick-reply-item:hover .quick-reply-thumb b { display: block; }
.quick-reply-create { width: 100%; border-top: 1px solid #dfe7e0 !important; color: #176c4a !important; font-weight: 800; }
.quick-reply-empty { margin: 0; padding: 12px; color: var(--muted); font-size: .75rem; }
.composer-media-preview { display: flex; gap: 9px; align-items: center; flex: 0 0 auto; min-height: 54px; border-top: 1px solid #dce3da; padding: 7px 18px; background: #fbfcf8; }
.composer-media-preview img { width: 45px; height: 45px; border-radius: 7px; object-fit: cover; }
.composer-media-preview strong { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.composer-media-preview .icon-button { margin-left: auto; }
.composer-media-preview.audio-preview audio { width: min(320px, 48vw); height: 38px; }
.recorded-audio-duration { flex: 0 0 auto; color: #536059; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.message-audio { display: block; width: 260px; min-width: 220px; max-width: 100%; height: 40px; margin: 2px 0 7px; }
.message-video { display: block; width: min(420px, 100%); max-height: 380px; margin: 2px 0 7px; border-radius: 9px; background: #111; }
.voice-record-button { position: relative; }
.voice-record-button.recording { border-color: #c52b43 !important; color: #fff !important; background: #d83b51 !important; animation: voice-record-pulse 1.2s ease-in-out infinite; }
.voice-record-button.recording::after { content: attr(data-duration); position: absolute; z-index: 12; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); border-radius: 8px; padding: 4px 7px; color: #fff; background: #263038; box-shadow: 0 4px 12px rgba(20,30,25,.18); font-size: .61rem; font-weight: 800; white-space: nowrap; }
@keyframes voice-record-pulse { 50% { box-shadow: 0 0 0 5px rgba(216,59,81,.18); } }
.message-media-image-wrap { display: block; width: max-content; max-width: 100%; margin-bottom: 7px; }
.message-media-image { display: block; }
.message-media-image, .department-chat-image { cursor: zoom-in; }
.message-media-image img { display: block; max-width: min(360px, 100%); max-height: 330px; border-radius: 9px; object-fit: cover; }
.message-link-preview { margin-block: 8px; white-space: normal; }
.message-link-image img { width: 320px; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: rgba(255,255,255,.92); }
.message-image-fallback { overflow-wrap: anywhere; }
.message-bubble-menu-trigger { position: absolute; z-index: 3; top: 6px; right: 7px; width: 25px; height: 25px; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; color: #53615a; background: rgba(255,255,255,.62); opacity: .82; transition: opacity .16s ease, background .16s ease, transform .16s ease; }
.message-row.outbound .message-bubble-menu-trigger { color: #245d44; background: rgba(255,255,255,.38); }
.message-bubble-menu-trigger:hover, .message-bubble-menu-trigger:focus-visible { background: rgba(255,255,255,.92); opacity: 1; transform: translateY(-1px); }
.message-bubble-menu-trigger .material-icon { width: 15px; height: 15px; transform: rotate(90deg); }
.message-attachment { display: block; margin-bottom: 7px; border-radius: 8px; padding: 9px; color: inherit; background: rgba(255,255,255,.2); text-decoration: none; }
.message-attachment.unavailable-document { display: flex; align-items: center; gap: 8px; border: 1px dashed rgba(83,97,90,.32); cursor: default; }
.message-attachment.unavailable-document > span { display: grid; min-width: 0; gap: 2px; }
.message-attachment.unavailable-document strong { overflow-wrap: anywhere; font-size: .75rem; }
.message-attachment.unavailable-document small { color: #66736c; font-size: .62rem; line-height: 1.3; }
.message-row.outbound .message-attachment.unavailable-document small { color: #32473b; }
.message-bubble a { color: inherit; text-decoration: underline; }
.message-action-target { position: relative; }
.message-rich-text, .internal-rich-text { min-width: 0; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.message-rich-text strong, .internal-rich-text strong { font-weight: 850; }
.message-rich-text strong a, .internal-rich-text strong a { font-weight: inherit; text-decoration: underline; }
.message-rich-text u, .internal-rich-text u { text-underline-offset: 2px; }
.message-rich-text code, .internal-rich-text code { border-radius: 4px; padding: 1px 4px; font-family: Consolas, monospace; background: rgba(17,24,39,.08); }
.message-reply-quote { display: grid; gap: 2px; margin: 0 0 7px; border-left: 3px solid #8bc817; border-radius: 5px; padding: 6px 8px; color: #45544b; background: rgba(239,246,232,.86); }
.message-reply-quote strong, .message-reply-quote span { display: block; min-width: 0; margin: 0; }
.message-reply-quote strong { color: #4f7613; font-size: .66rem; }
.message-reply-quote span { overflow: hidden; font-size: .68rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.message-reply-quote.can-jump-to-message { cursor: pointer; transition: filter .18s ease, transform .18s ease; }
.message-reply-quote.can-jump-to-message:hover, .message-reply-quote.can-jump-to-message:focus-visible { filter: brightness(.97); outline: 2px solid rgba(139,200,23,.32); outline-offset: 1px; transform: translateY(-1px); }
.message-reference-highlight .message-bubble, .message-reference-highlight.department-chat-message, .message-reference-highlight { animation: message-reference-highlight 1.8s ease; }
@keyframes message-reference-highlight { 0%, 100% { box-shadow: none; } 18%, 70% { box-shadow: 0 0 0 3px rgba(217,45,121,.35), 0 8px 24px rgba(43,70,55,.12); } }
.message-row.outbound .message-reply-quote { border-left-color: rgba(17,24,20,.46); color: #23372c; background: rgba(255,255,255,.34); }
.message-row.outbound .message-reply-quote strong { color: #111814; }
.operator-messages .message-row.outbound .message-reply-quote, .operator-messages .message-row.outbound .message-reply-quote strong, .operator-messages .message-row.outbound .message-attachment.unavailable-document small { color: #fff; }
.operator-messages .message-row.outbound .message-reply-quote { border-left-color: rgba(255,255,255,.7); background: rgba(0,0,0,.09); }
.message-reactions { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.message-reactions > span { display: inline-flex !important; gap: 2px; align-items: center; width: max-content; margin: 0 !important; border: 1px solid #d9e2db; border-radius: 999px; padding: 1px 5px; color: #24362c; background: white; box-shadow: 0 1px 3px rgba(20,46,32,.08); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: .72rem !important; }
.message-reactions b { font-family: inherit; font-size: .55rem; }
.message-context-menu { position: fixed; z-index: 2147483647; width: min(280px, calc(100vw - 24px)); min-width: min(280px, calc(100vw - 24px)); height: auto; max-height: calc(100vh - 24px); display: grid; grid-auto-rows: max-content; align-content: start; gap: 5px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #d8e1da; border-radius: 11px; padding: 7px; color: #27372e; background: white; box-shadow: 0 18px 44px rgba(24,48,35,.28); }
.message-context-menu.screen-top { top: 12px; bottom: auto; }
.message-context-menu.screen-middle { top: 50%; bottom: auto; transform: translateY(-50%); }
.message-context-menu.screen-bottom { top: auto; bottom: 12px; }
.message-context-menu.screen-left { right: auto; left: 12px; }
.message-context-menu.screen-right { right: 12px; left: auto; }
.has-message-context-menu { anchor-name: --message-context-anchor; }
@supports (position-anchor: --message-context-anchor) {
  .message-context-menu { position-anchor: --message-context-anchor; }
  .message-context-menu.screen-top { top: anchor(top); bottom: auto; transform: none; }
  .message-context-menu.screen-middle { top: anchor(center); bottom: auto; transform: translateY(-50%); }
  .message-context-menu.screen-bottom { top: auto; bottom: anchor(bottom); transform: none; }
  .message-context-menu.screen-left { right: auto; left: anchor(left); }
  .message-context-menu.screen-right { right: anchor(right); left: auto; }
}
.message-context-menu > button { display: flex; gap: 7px; align-items: center; border: 0; border-radius: 7px; padding: 7px 8px; color: #314038; background: #f4f7f3; font-size: .68rem; font-weight: 800; text-align: left; }
.message-context-menu > button:hover { background: #eaf3e4; }
.message-context-menu > button.danger { color: #b42332; background: #fff0f2; }
.message-context-menu > button.danger:hover { background: #ffe2e6; }
.message-context-menu .material-icon { width: 17px; height: 17px; }
.message-context-menu .copy-selection-action { border-top: 1px solid #dfe6e0; border-radius: 0 0 7px 7px; padding-top: 9px; }
.message-context-menu.internal-context-position { right: auto; }
.clipboard-copy-proxy { position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.message-row.deleted .message-bubble { color: #68736d; background: #f1f3f1; font-style: italic; }
.message-deleted-copy { display: inline-flex; gap: 6px; align-items: center; }
.message-deleted-copy .material-icon { width: 16px; height: 16px; }
.message-reaction-picker { width: 100%; max-height: 190px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; overflow-y: auto; border-top: 1px solid #e2e8e3; padding-top: 5px; }
.message-reaction-picker button { min-width: 0; border: 0; border-radius: 7px; padding: 4px 2px; background: transparent; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: .92rem; }
.message-reaction-picker button:hover { background: #eef5e9; transform: scale(1.12); }
.composer-reply-slot { flex: 0 0 auto; border-top: 1px solid #dce3da; padding: 7px 14px; background: #f9fbf7; }
.composer-reply-preview { display: grid; grid-template-columns: 26px minmax(0,1fr) 30px; gap: 8px; align-items: center; border-left: 3px solid var(--green); border-radius: 7px; padding: 6px 8px; color: #314038; background: #eef5e9; }
.composer-reply-preview > span { display: grid; place-items: center; color: #56850f; }
.composer-reply-preview .material-icon { width: 18px; height: 18px; }
.composer-reply-preview strong, .composer-reply-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-reply-preview strong { font-size: .67rem; }.composer-reply-preview small { margin-top: 2px; color: #66736b; font-size: .61rem; }
.composer-reply-preview .icon-button { width: 28px; height: 28px; }
.note-button.has-note { border: 1px solid #f2bd4e; color: #76510c; background: #fff4cf; }
.conversation-context-menu { position: fixed; z-index: 100; display: grid; width: min(440px, calc(100vw - 20px)); max-height: calc(100vh - 20px); overflow-y: auto; gap: 5px; border: 1px solid #d7e0d9; border-radius: 12px; padding: 10px; background: white; box-shadow: 0 16px 45px rgba(21,32,27,.22); }
.conversation-context-menu strong { margin-bottom: 4px; font-size: .78rem; }
.conversation-context-menu label { display: flex; gap: 7px; align-items: center; margin: 0; padding: 5px; font-size: .72rem; }
.conversation-context-menu input { width: auto; }
.conversation-context-menu .conversation-flag-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.conversation-context-menu .flag-option { border: 1px solid transparent; border-radius: 8px; }
.conversation-context-menu .flag-option i { width: 9px; height: 9px; flex: 0 0 auto; border: 2px solid currentColor; border-radius: 50%; background: transparent; }
.conversation-context-menu .flag-option:has(input:checked) { border-color: currentColor; font-weight: 800; }
.conversation-context-menu .flag-option:has(input:checked) i { background: currentColor; box-shadow: inset 0 0 0 2px white; }
.conversation-context-menu .flag-option.flag-blacklist:has(input:checked) i { background: #fff; box-shadow: inset 0 0 0 2px #111; }
.conversation-context-menu .flag-none { color: #68766e; background: #f5f7f5; }
.blacklist-reason-field, .conversation-context-menu .blacklist-reason-field { display: grid; gap: 5px; margin: 4px 0 2px; border: 1px solid #262626; border-radius: 9px; padding: 8px; color: #202020; background: #f4f4f4; font-size: .7rem; font-weight: 800; }
.blacklist-reason-field textarea, .conversation-context-menu .blacklist-reason-field textarea { width: 100%; min-height: 72px; margin: 0; resize: vertical; border-color: #b8b8b8; padding: 8px; color: #171717; background: #fff; font: inherit; font-weight: 500; line-height: 1.35; }
.blacklist-reason-field small { color: #686868; font-size: .58rem; font-weight: 600; }
.conversation-context-menu .mark-unread-action { margin-top: 3px; border-color: #d6b45d; color: #765817; background: #fff9e8; }
.conversation-context-menu .send-template-action { margin-top: 3px; border-color: #9fb5c3; color: #315b70; background: #f1f8fb; }
.department-chat-drawer { position: absolute; z-index: 2147483646; right: 0; top: 0; bottom: 0; width: 340px; transform: translateX(100%); border-left: 1px solid #d9e3dc; background: #fbfcf8; box-shadow: -10px 0 30px rgba(22,45,34,.11); transition: transform .24s ease; }
.department-chat-drawer[data-width-step="0"] { width: 280px; }
.department-chat-drawer[data-width-step="1"] { width: 300px; }
.department-chat-drawer[data-width-step="2"] { width: 320px; }
.department-chat-drawer[data-width-step="3"] { width: 340px; }
.department-chat-drawer[data-width-step="4"] { width: 360px; }
.department-chat-drawer[data-width-step="5"] { width: 380px; }
.department-chat-drawer[data-width-step="6"] { width: 400px; }
.department-chat-drawer[data-width-step="7"] { width: 420px; }
.department-chat-drawer[data-width-step="8"] { width: 440px; }
.department-chat-drawer[data-width-step="9"] { width: 460px; }
.department-chat-drawer[data-width-step="10"] { width: 480px; }
.department-chat-drawer[data-width-step="11"] { width: 500px; }
.department-chat-drawer[data-width-step="12"] { width: 520px; }
.department-chat-drawer[data-width-step="13"] { width: 540px; }
.department-chat-drawer[data-width-step="14"] { width: 560px; }
.department-chat-drawer[data-width-step="15"] { width: 580px; }
.department-chat-drawer[data-width-step="16"] { width: 600px; }
.department-chat-drawer[data-width-step="17"] { width: 620px; }
.department-chat-drawer[data-width-step="18"] { width: 640px; }
.department-chat-drawer[data-width-step="19"] { width: 660px; }
.department-chat-drawer[data-width-step="20"] { width: 680px; }
.department-chat-drawer[data-width-step="21"] { width: 700px; }
.department-chat-drawer[data-width-step="22"] { width: 720px; }
.department-chat-drawer[data-width-step="23"] { width: 740px; }
.department-chat-drawer[data-width-step="24"] { width: 760px; }
.department-chat-drawer[data-width-step="25"] { width: 780px; }
.department-chat-drawer[data-width-step="26"] { width: 800px; }
.department-chat-drawer[data-width-step="27"] { width: 820px; }
.department-chat-drawer[data-width-step="28"] { width: 840px; }
.department-chat-drawer[data-width-step="29"] { width: 860px; }
.department-chat-drawer[data-width-step="30"] { width: 880px; }
.department-chat-drawer[data-width-step="31"] { width: 900px; }
.department-chat-drawer[data-width-step="32"] { width: 920px; }
.department-chat-drawer[data-width-step="33"] { width: 940px; }
.department-chat-drawer[data-width-step="34"] { width: 960px; }
.department-chat-drawer[data-width-step="35"] { width: 980px; }
.department-chat-drawer[data-width-step="36"] { width: 1000px; }
.department-chat-drawer[data-width-step="37"] { width: 1020px; }
.department-chat-drawer[data-width-step="38"] { width: 1040px; }
.department-chat-drawer[data-width-step="39"] { width: 1060px; }
.department-chat-drawer[data-width-step="40"] { width: 1080px; }
.department-chat-drawer[data-width-step="41"] { width: 1100px; }
.department-chat-drawer[data-width-step="42"] { width: 1120px; }
.department-chat-drawer[data-width-step="43"] { width: 1140px; }
.department-chat-drawer[data-width-step="44"] { width: 1160px; }
.department-chat-drawer[data-width-step="45"] { width: 1180px; }
.department-chat-drawer[data-width-step="46"] { width: 1200px; }
.department-chat-drawer[data-width-step="47"] { width: 1220px; }
.department-chat-drawer[data-width-step="48"] { width: 1240px; }
.department-chat-drawer[data-width-step="49"] { width: 1260px; }
.department-chat-drawer[data-width-step="50"] { width: 1280px; }
.department-chat-drawer[data-width-step="51"] { width: 1300px; }
.department-chat-drawer[data-width-step="52"] { width: 1320px; }
.department-chat-drawer[data-width-step="53"] { width: 1340px; }
.department-chat-drawer[data-width-step="54"] { width: 1360px; }
.department-chat-drawer[data-width-step="55"] { width: 1380px; }
.department-chat-drawer[data-width-step="56"] { width: 1400px; }
.department-chat-drawer.open { transform: translateX(0); }
.department-chat-resize-handle { position: absolute; z-index: 3; left: -5px; top: 0; bottom: 0; width: 10px; cursor: ew-resize; touch-action: none; }
.department-chat-resize-handle::after { content: ''; position: absolute; left: 4px; top: 42%; width: 2px; height: 54px; border-radius: 4px; background: #a9bbb0; opacity: .65; }
.department-chat-resize-handle:hover::after, body.resizing-department-chat .department-chat-resize-handle::after { width: 3px; background: var(--green); opacity: 1; }
body.resizing-department-chat { cursor: ew-resize; user-select: none; }
.department-chat-tab { position: absolute; left: -34px; top: 115px; width: 34px; min-height: 126px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; border: 1px solid #cad9ce; border-right: 0; border-radius: 12px 0 0 12px; color: #176c4a; background: white; box-shadow: -4px 5px 18px rgba(25,49,37,.1); }
.department-chat-tab span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .66rem; font-weight: 800; }
.department-chat-tab b { position: relative; display: grid; place-items: center; }
.internal-unread-badge { min-width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 12px; padding: 0 4px; color: white; background: #d92d45; box-shadow: 0 2px 7px rgba(158,22,43,.28); font-size: .6rem; font-style: normal; font-weight: 900; line-height: 1; }
.department-chat-tab .internal-unread-badge { position: absolute; right: -13px; top: -11px; }
.department-chat-content { min-width: 0; height: 100%; container-type: inline-size; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 4px; overflow: hidden; padding: 14px; }
.department-chat-content header { display: flex; justify-content: space-between; align-items: center; }
.department-chat-content header strong, .department-chat-content header small { display: block; }
.department-chat-content header small[hidden] { display: none; }
.department-chat-content header small { margin-top: 2px; color: var(--muted); font-size: .67rem; }
.department-chat-header-actions { display: flex; gap: 6px; align-items: center; }
.department-chat-header-actions #openDepartmentChatStandalone { border: 1px solid #d9e3dc; color: #247653; background: white; }
.department-chat-header-actions #openDepartmentChatStandalone:hover, .department-chat-header-actions #openDepartmentChatStandalone:focus-visible { border-color: #91c93b; color: #315f17; background: #f2fae8; }
.department-chat-content select { margin: 0; }
.internal-chat-tabs { display: flex; min-width: 0; gap: 5px; overflow-x: auto; padding: 1px 1px 2px; scrollbar-width: thin; }
.internal-chat-tab, .new-private-chat { min-height: 31px; display: inline-flex; flex: 0 0 auto; gap: 5px; align-items: center; border: 1px solid #d7e2da; border-radius: 9px; padding: 6px 9px; color: #56675d; background: white; font-size: .66rem; font-weight: 780; white-space: nowrap; }
.internal-chat-tab.active { border-color: #77b721; color: #356a16; background: #eff8df; box-shadow: inset 0 -2px #80c627; }
.internal-chat-tab .internal-unread-badge { min-width: 16px; height: 16px; font-size: .55rem; }
.internal-muted-badge { display: inline-grid; flex: 0 0 auto; place-items: center; min-width: 17px; height: 17px; font-size: .85rem; font-style: normal; line-height: 1; }
.internal-chat-tab .internal-muted-badge { margin-left: 1px; }
.self-chat-tab .material-icon { width: 15px; height: 15px; }
.internal-department-picker { position: relative; display: block; min-width: 0; margin: 0; }
.internal-department-picker select { width: 100%; padding-right: 58px; }
.internal-department-picker > .internal-unread-badge { position: absolute; top: 50%; right: 31px; z-index: 2; pointer-events: none; transform: translateY(-50%); }
.internal-department-picker > .internal-muted-badge { position: absolute; top: 50%; right: 31px; z-index: 2; pointer-events: none; transform: translateY(-50%); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.private-chat-tab-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.private-chat-tab-wrap .internal-chat-tab { padding-right: 25px; }
.close-private-tab { position: absolute; right: 4px; top: 5px; width: 19px; height: 19px; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; color: #849087; background: transparent; font-size: .85rem; }
.close-private-tab:hover { color: white; background: #d92d45; }
.private-chat-context-menu { position: fixed; z-index: 2147483647; width: min(220px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); display: grid; gap: 6px; overflow-y: auto; border: 1px solid #d9e2db; border-radius: 11px; padding: 8px; color: #314038; background: white; box-shadow: 0 14px 34px rgba(25,48,36,.2); }
.private-chat-context-menu > strong { overflow: hidden; padding: 3px 6px 5px; color: #68756e; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.private-chat-context-menu button { width: 100%; display: flex; gap: 9px; align-items: center; border: 0; border-radius: 8px; padding: 8px 9px; color: #245d43; background: #eef7ef; text-align: left; }
.private-chat-context-menu button:hover { background: #def0e1; }
.private-chat-context-menu button.danger { color: #b42335; background: #fff2f4; }
.private-chat-context-menu button.danger:hover { background: #ffe5e9; }
.private-chat-context-menu button:disabled { opacity: .6; cursor: wait; }
.private-chat-context-menu button .material-icon { width: 18px; height: 18px; }
.private-chat-context-menu button span, .private-chat-context-menu button small { display: block; }
.private-chat-context-menu button span { font-size: .7rem; font-weight: 800; }
.private-chat-context-menu button small { margin-top: 2px; color: #8b6870; font-size: .58rem; font-weight: 650; }
.new-private-chat { color: #176c4a; border-style: dashed; }
.new-private-chat .material-icon { width: 15px; height: 15px; }
.internal-chat-context { min-height: 32px; display: grid; gap: 6px; }
.internal-chat-context > small { color: var(--muted); font-size: .66rem; }
.internal-chat-context-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.internal-chat-context-row .message-order-toggle, .private-chat-context .message-order-toggle, .internal-chat-context-row .mark-all-read, .private-chat-context .mark-all-read { width: 34px; min-width: 34px; height: 34px; }
.private-chat-context { display: flex; gap: 8px; align-items: center; border: 1px solid #dfe7e0; border-radius: 9px; padding: 7px 9px; background: white; }
.private-chat-context > span { font-size: 1.15rem; }.private-chat-context strong, .private-chat-context small { display: block; }.private-chat-context strong { font-size: .72rem; }.private-chat-context small { margin-top: 2px; color: var(--muted); font-size: .62rem; }
.private-chat-context-copy { min-width: 0; flex: 1 1 auto; }
.private-chat-context-copy strong, .private-chat-context-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clear-private-notes { min-height: 31px; display: inline-flex; gap: 5px; align-items: center; margin-left: auto; border: 1px solid #efc3ca; border-radius: 9px; padding: 6px 8px; color: #b42335; background: #fff6f7; font-size: .62rem; font-weight: 800; }
.private-chat-context .clear-private-notes { margin-left: 0; }
.clear-private-notes:hover { border-color: #dd8e9b; background: #ffecef; }
.clear-private-notes .material-icon { width: 16px; height: 16px; }
.department-chat-messages { min-width: 0; min-height: 0; max-width: 100%; overflow-x: hidden; overflow-y: auto; display: grid; grid-auto-rows: max-content; align-content: start; gap: 8px; padding: 8px; border-radius: 12px; background: #f1f5ef; }
.support-ticket-context { grid-template-columns: minmax(0, 1fr) auto; }
.support-ticket-context .button { min-height: 34px; white-space: nowrap; }
.support-ticket-dashboard { display: block; padding: 8px; }
.support-ticket-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 8px; }
.support-ticket-card { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 7px; border: 1px solid #d7e2da; border-radius: 10px; padding: 9px 10px; color: #34483d; background: #fff; text-align: left; }
.support-ticket-card span { min-width: 0; margin: 0; overflow: hidden; font-size: .62rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.support-ticket-card strong { flex: 0 0 auto; font-size: 1rem; }
.support-ticket-card.active { border-color: #79bd25; box-shadow: 0 0 0 2px rgba(121,189,37,.13); }
.support-ticket-card.card-open strong { color: #c04444; }.support-ticket-card.card-progress strong { color: #a96900; }.support-ticket-card.card-validation strong { color: #6c49ba; }.support-ticket-card.card-completed strong { color: #278054; }
.support-ticket-layout { min-width: 0; display: grid; gap: 8px; }
.support-ticket-list, .support-ticket-detail, .support-ticket-empty { min-width: 0; border: 1px solid #dce5de; border-radius: 11px; background: #fff; }
.support-ticket-list > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #e5ebe6; padding: 9px 10px; }
.support-ticket-list > header strong, .support-ticket-list > header small { display: block; margin: 0; }.support-ticket-list > header strong { font-size: .71rem; }.support-ticket-list > header small { margin-top: 2px; color: var(--muted); font-size: .58rem; }
.support-ticket-list-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
.support-ticket-list-actions .icon-button { width: 31px; height: 31px; border: 1px solid #dbe4dd; }
.support-ticket-list-actions .support-ticket-mine-filter { white-space: nowrap; }.support-ticket-list-actions .support-ticket-mine-filter.active { border-color: #9bcf57; color: #315b13; background: #ecf9d9; }
.support-ticket-list-actions .support-ticket-urgent-filter { display: inline-flex; flex: 0 0 auto; gap: 3px; align-items: center; border-color: transparent; padding: 5px 7px; color: #d42136; background: transparent; white-space: nowrap; }.support-ticket-list-actions .support-ticket-urgent-filter span { white-space: nowrap; }.support-ticket-list-actions .support-ticket-urgent-filter .material-icon { width: 14px; height: 14px; }.support-ticket-list-actions .support-ticket-urgent-filter b { min-width: 10px; padding: 0; color: #d42136; background: transparent; font-size: .52rem; line-height: 1; }.support-ticket-list-actions .support-ticket-urgent-filter:hover { border-color: transparent; color: #ad1426; background: transparent; }.support-ticket-list-actions .support-ticket-urgent-filter.active { border-color: transparent; color: #bd1226; background: transparent; box-shadow: inset 0 -2px 0 #d42136; }.support-ticket-list-actions .support-ticket-urgent-filter.active b { color: #bd1226; background: transparent; }
.support-ticket-search { margin: 7px 7px 0; }
.support-ticket-table-scroll { --ticket-date-width: 72px; --ticket-id-width: 112px; --ticket-name-width: 210px; --ticket-category-width: 36px; --ticket-status-width: 92px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.support-ticket-table-head, .support-ticket-row { min-width: calc(var(--ticket-date-width) + var(--ticket-id-width) + var(--ticket-name-width) + var(--ticket-category-width) + var(--ticket-status-width) + 28px); display: grid; grid-template-columns: var(--ticket-date-width) var(--ticket-id-width) minmax(var(--ticket-name-width), 1fr) var(--ticket-category-width) var(--ticket-status-width); gap: 4px; align-items: center; }
.support-ticket-table-head { margin: 7px 7px 0; border-radius: 8px 8px 0 0; padding: 0 6px; color: #66736b; background: #eef3ef; font-size: .5rem; font-weight: 850; text-transform: uppercase; }
.support-ticket-table-head > span { position: relative; min-height: 31px; display: flex; align-items: center; }
.support-ticket-table-head > span + span { border-left: 1px solid #cfdad2; padding-left: 4px; }
.support-ticket-resize-handle { position: absolute; z-index: 2; top: 2px; right: -6px; bottom: 2px; width: 12px; border: 0; border-radius: 5px; padding: 0; background: transparent; cursor: col-resize; touch-action: none; }
.support-ticket-resize-handle::after { content: ''; position: absolute; top: 5px; bottom: 5px; left: 5px; width: 2px; border-radius: 2px; background: #aab8ad; }
.support-ticket-resize-handle:hover, .support-ticket-resize-handle:focus-visible { background: #d8ead3; outline: none; }
.support-ticket-resize-handle:hover::after, .support-ticket-resize-handle:focus-visible::after { background: #4b9135; }
.support-ticket-table-body { display: grid; gap: 5px; padding: 5px 7px 7px; }
.support-ticket-row { width: 100%; border: 1px solid #e1e8e2; border-radius: 9px; padding: 8px 6px; color: inherit; background: #fbfcfa; text-align: left; }
.support-ticket-row:hover, .support-ticket-row.active { border-color: #94c84e; background: #f3fae9; }
.support-ticket-row.has-unread { border-color: #79bd25; background: #f6fce9; box-shadow: inset 3px 0 #79bd25; }
.support-ticket-cell { min-width: 0; display: block; margin: 0; overflow: hidden; font-size: .54rem; text-overflow: ellipsis; white-space: normal; }
.support-ticket-date { color: var(--muted); white-space: nowrap; }.department-chat-messages .support-ticket-date b, .department-chat-messages .support-ticket-date small { display: block; margin: 0; line-height: 1.2; white-space: nowrap; }.department-chat-messages .support-ticket-date b { color: #56635c; font-size: .67rem; }.department-chat-messages .support-ticket-date small { color: var(--muted); font-size: .61rem; }.support-ticket-protocol { color: #34483d; white-space: nowrap; }.department-chat-messages .support-ticket-protocol b, .department-chat-messages .support-ticket-protocol small { display: block; margin: 0; overflow: hidden; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }.department-chat-messages .support-ticket-protocol b { font-size: .67rem; }.department-chat-messages .support-ticket-protocol small { color: var(--muted); font-size: .61rem; }.department-chat-messages .support-ticket-name { display: flex !important; gap: 4px; align-items: center; max-height: none; overflow: visible; font-size: .57rem; font-weight: 750; line-height: 1.17; white-space: normal !important; }.department-chat-messages .support-ticket-name > span:first-child { min-width: 0; display: -webkit-box; max-height: 2.35em; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.support-ticket-name .internal-unread-badge { min-width: 16px; height: 16px; flex: 0 0 auto; font-size: .52rem; }.support-ticket-status-cell { overflow: visible; }
.support-ticket-category-heading, .support-ticket-category-cell { display: flex; align-items: center; justify-content: center; padding-left: 0 !important; }.support-ticket-category-heading .material-icon { width: 13px; height: 13px; }.support-ticket-category { width: 18px; height: 18px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; color: #4e5b54; background: transparent; }.support-ticket-category .material-icon { width: 17px; height: 17px; }.support-ticket-category.category-urgent { color: #d42136; background: transparent; box-shadow: none; }.support-ticket-category.category-backlog { color: #425f88; background: transparent; }.support-ticket-category.category-bug { color: #bd2638; background: transparent; }.support-ticket-category.category-upgrade { color: #1677a5; background: transparent; }.support-ticket-category.category-improvement { color: #218653; background: transparent; }.support-ticket-category.category-epic { color: #7b43bb; background: transparent; }.support-ticket-category.category-change { color: #a66a00; background: transparent; }
.support-ticket-pagination { min-height: 43px; display: flex; gap: 8px; align-items: center; justify-content: space-between; border-top: 1px solid #e5ebe6; padding: 7px 9px; color: var(--muted); font-size: .58rem; }
.support-ticket-pagination > div { display: flex; gap: 5px; }.support-ticket-pagination .button { min-height: 29px; padding: 5px 8px; }
.support-ticket-status { display: inline-flex !important; max-width: 100%; width: fit-content; align-items: center; justify-content: center; margin: 0 !important; border-radius: 999px; padding: 4px; color: #48534d; background: #edf1ee; font-size: .46rem !important; font-weight: 850; line-height: 1.05; text-align: center; white-space: normal !important; }
.support-ticket-status.status-open { color: #9f2f38; background: #ffeaed; }.support-ticket-status.status-answered { color: #166087; background: #e3f4fd; }.support-ticket-status.status-implementation { color: #8a5700; background: #fff1d4; }.support-ticket-status.status-validation { color: #6141a1; background: #efe8ff; }.support-ticket-status.status-completed { color: #21724a; background: #e2f6e9; }
.support-ticket-list-empty { padding: 18px 10px !important; color: var(--muted); font-size: .65rem; text-align: center; }
.support-ticket-empty { display: grid; place-items: center; gap: 5px; min-height: 110px; padding: 18px; color: var(--muted); text-align: center; }.support-ticket-empty strong, .support-ticket-empty span { display: block; margin: 0; }.support-ticket-empty strong { color: #34443b; font-size: .72rem; }.support-ticket-empty span { font-size: .62rem; }
.support-ticket-detail { padding: 10px; }
.support-ticket-detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; border-bottom: 1px solid #e5ebe6; padding-bottom: 9px; }.support-ticket-detail > header > div { min-width: 0; display: flex; gap: 7px; align-items: flex-start; }
.support-ticket-detail h3, .support-ticket-detail h4, .support-ticket-detail p { margin: 0; }.support-ticket-detail h3 { margin-top: 2px; overflow-wrap: anywhere; font-size: .78rem; }.support-ticket-detail h4 { font-size: .67rem; }.support-ticket-detail > header small { display: block; margin: 0; color: var(--muted); font-size: .56rem; font-weight: 800; }
.support-ticket-back { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #dbe4dd; border-radius: 8px; padding: 0; color: #456152; background: #fff; }.support-ticket-back .material-icon { width: 16px; height: 16px; }
.support-ticket-status-control, .support-ticket-category-control { min-width: 112px; margin: 0; }.support-ticket-status-control span, .support-ticket-category-control span, .support-ticket-category-display > span { display: block; margin: 0 0 3px; color: var(--muted); font-size: .52rem; font-weight: 800; }.support-ticket-status-control select, .support-ticket-category-control select { width: 100%; padding: 6px; font-size: .61rem; }.support-ticket-category-display strong { display: flex; gap: 7px; align-items: center; font-size: .7rem; }
.support-ticket-requester { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 7px; align-items: baseline; margin-top: 9px; border-radius: 8px; padding: 7px 8px; background: #f4f7f3; }.support-ticket-requester span, .support-ticket-requester strong, .support-ticket-requester small { margin: 0; }.support-ticket-requester span { color: var(--muted); font-size: .55rem; font-weight: 800; text-transform: uppercase; }.support-ticket-requester strong { overflow: hidden; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }.support-ticket-requester small { grid-column: 2; color: var(--muted); font-size: .56rem; }
.support-ticket-description { margin-top: 9px; }.support-ticket-description strong { display: block; margin-bottom: 4px; font-size: .65rem; }.support-ticket-description p { overflow-wrap: anywhere; font-size: .66rem; line-height: 1.45; white-space: pre-wrap; }
.support-ticket-timeline { display: grid; gap: 6px; margin-top: 12px; }
.support-ticket-dashboard .support-ticket-activity { display: grid; gap: 5px; border: 1px solid #e1e8e2; border-left: 3px solid #95b49f; border-radius: 8px; padding: 7px 8px; background: #fbfcfa; }.support-ticket-dashboard .support-ticket-activity.activity-status { border-left-color: #7f5cc4; background: #faf8ff; }.support-ticket-dashboard .support-ticket-activity > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.support-ticket-dashboard .support-ticket-activity strong, .support-ticket-dashboard .support-ticket-activity small { display: block; margin: 0; }.support-ticket-dashboard .support-ticket-activity strong { font-size: .62rem; }.support-ticket-dashboard .support-ticket-activity small { color: var(--muted); font-size: .52rem; }.support-ticket-dashboard .support-ticket-activity p { overflow-wrap: anywhere; font-size: .63rem; line-height: 1.4; white-space: pre-wrap; }
.support-ticket-response-form { display: grid; gap: 6px; margin-top: 12px; border-top: 1px solid #e1e8e2; padding-top: 9px; }.support-ticket-response-form label, .support-ticket-response-form label > span { display: block; margin: 0; }.support-ticket-response-form label > span { margin-bottom: 4px; font-size: .62rem; font-weight: 800; }.support-ticket-response-form textarea { width: 100%; min-height: 68px; font-size: .65rem; }.support-ticket-response-form .button { justify-self: end; }
@container (min-width: 720px) { .support-ticket-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }.support-ticket-layout { grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); align-items: start; } }
.contact-modal.support-ticket-modal { width: min(980px, 100%); padding: 20px; }
.contact-modal.support-ticket-create-modal { width: min(760px, 100%); }
.support-ticket-create-fields { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr); gap: 12px; }.support-ticket-create-fields label, .support-ticket-create-fields select, .support-ticket-create-fields input { min-width: 0; width: 100%; }
.support-ticket-modal-title { position: sticky; top: -20px; z-index: 2; margin: -20px -20px 16px; border-bottom: 1px solid #dfe7e1; padding: 18px 20px 14px; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); }
.support-ticket-modal-title h2 { overflow-wrap: anywhere; font-size: 1.18rem; }
.support-ticket-modal .support-ticket-detail { border: 0; border-radius: 0; padding: 0; background: transparent; }
.support-ticket-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 14px; align-items: end; }
.support-ticket-controls { display: grid; grid-template-columns: repeat(2, minmax(135px, 1fr)); gap: 10px; align-items: end; }
.support-ticket-modal .support-ticket-requester { margin: 0; padding: 11px 12px; }
.support-ticket-modal .support-ticket-requester span { font-size: .64rem; }
.support-ticket-modal .support-ticket-requester strong { font-size: .8rem; }
.support-ticket-modal .support-ticket-requester small { font-size: .68rem; }
.support-ticket-modal .support-ticket-status-control, .support-ticket-modal .support-ticket-category-control { min-width: 0; }
.support-ticket-modal .support-ticket-status-control span, .support-ticket-modal .support-ticket-category-control span, .support-ticket-modal .support-ticket-category-display > span { margin-bottom: 6px; font-size: .66rem; }
.support-ticket-modal .support-ticket-status-control select, .support-ticket-modal .support-ticket-category-control select { min-height: 42px; font-size: .76rem; }
.support-ticket-modal .support-ticket-description { margin-top: 16px; border: 1px solid #e0e7e1; border-radius: 12px; padding: 13px 14px; background: #fbfcfa; }
.support-ticket-modal .support-ticket-description > strong, .support-ticket-modal .support-ticket-timeline h4 { margin-bottom: 8px; font-size: .77rem; }
.support-ticket-modal .support-ticket-description p { font-size: .78rem; line-height: 1.55; }
.support-ticket-modal .support-ticket-timeline { gap: 9px; margin-top: 18px; }
.support-ticket-modal .support-ticket-activity { display: grid; gap: 7px; border: 1px solid #e1e8e2; border-left: 4px solid #95b49f; border-radius: 10px; padding: 10px 12px; background: #fbfcfa; }
.support-ticket-modal .support-ticket-activity.activity-status { border-left-color: #7f5cc4; background: #faf8ff; }
.support-ticket-modal .support-ticket-activity > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.support-ticket-modal .support-ticket-activity strong { font-size: .74rem; }
.support-ticket-modal .support-ticket-activity small { color: var(--muted); font-size: .65rem; }
.support-ticket-modal .support-ticket-activity p { margin: 0; overflow-wrap: anywhere; font-size: .75rem; line-height: 1.5; white-space: pre-wrap; }
.support-ticket-response-form { gap: 9px; margin-top: 18px; padding-top: 14px; }
.support-ticket-response-form > strong, .support-ticket-create-form .full > strong { display: block; margin: 0 0 7px; font-size: .75rem; }
.support-ticket-response-form > .button { display: inline-flex; align-items: center; gap: 6px; justify-self: end; }
.support-ticket-response-form > .button .material-icon { width: 16px; height: 16px; }
.support-ticket-composer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: end; }
.support-ticket-composer-tools { display: flex; flex-direction: column; gap: 3px; align-items: center; padding-bottom: 0; }
.support-ticket-composer-tools .attach-button { display: flex; align-items: center; justify-content: center; padding: 0; line-height: 0; }
.support-ticket-composer-tools .attach-button .material-icon { display: block; margin: 0; }
.support-ticket-composer textarea { width: 100%; min-height: 84px; font-size: .77rem; }
.support-ticket-composer-help { display: block; margin-top: 5px; color: var(--muted); font-size: .63rem; }
.support-ticket-media-preview { display: grid; grid-template-columns: 56px minmax(0, 1fr) 36px; gap: 9px; align-items: center; margin-bottom: 8px; border: 1px solid #d7e2da; border-radius: 11px; padding: 7px; background: #fff; }
.support-ticket-media-preview img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.support-ticket-media-preview > i { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 8px; color: #397557; background: #eef6f0; }
.support-ticket-media-preview > span { overflow: hidden; color: #59665f; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.support-ticket-media-preview.audio-preview { grid-template-columns: minmax(0, 1fr) auto 36px; }
.support-ticket-media-preview.audio-preview audio { width: 100%; min-width: 0; height: 38px; }
.support-ticket-media-preview.audio-preview > span { display: none; }
.support-ticket-media { width: fit-content; max-width: 100%; display: flex; gap: 8px; align-items: center; margin-top: 7px; border: 1px solid #dce5de; border-radius: 9px; padding: 7px 9px; color: #286441; background: #fff; text-decoration: none; }
.support-ticket-media span { overflow: hidden; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.support-ticket-media-image { display: grid; justify-items: start; }
.support-ticket-media-image img { width: min(280px, 100%); max-height: 220px; border-radius: 8px; object-fit: contain; }
.support-ticket-media-audio { width: min(430px, 100%); display: grid; }
.support-ticket-media-audio audio { width: 100%; min-width: 0; }
.support-ticket-media-video { width: min(430px, 100%); display: grid; }
.support-ticket-media-video video { width: 100%; max-height: 280px; border-radius: 7px; background: #111; }
.support-ticket-media-file .material-icon { width: 18px; height: 18px; }
@media (max-width: 620px) {
  .contact-modal.support-ticket-modal { padding: calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)); }
  .support-ticket-modal-title { top: calc(-14px - env(safe-area-inset-top)); margin: calc(-14px - env(safe-area-inset-top)) -12px 14px; padding: calc(14px + env(safe-area-inset-top)) 12px 12px; }
  .support-ticket-summary { grid-template-columns: 1fr; align-items: stretch; }
  .support-ticket-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-ticket-table-head { display: none; }
  .support-ticket-table-scroll { overflow-x: visible; }
  .support-ticket-row { min-width: 0; grid-template-columns: 1fr auto; gap: 6px 10px; }
  .support-ticket-cell::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: .48rem; font-weight: 800; text-transform: uppercase; }
  .support-ticket-name { grid-column: 1 / -1; grid-row: 1; }.support-ticket-date { grid-column: 1; grid-row: 2; }.support-ticket-protocol { grid-column: 2; grid-row: 2; width: min(120px, 42vw); }.support-ticket-category-cell { grid-column: 1; grid-row: 3; justify-content: flex-start; }.support-ticket-category-cell::before { display: none; }.support-ticket-status-cell { grid-column: 2; grid-row: 3; }
  .support-ticket-create-fields { grid-template-columns: 1fr; }
  .support-ticket-pagination { align-items: flex-start; flex-direction: column; }
}
.department-chat-messages .chat-history-more { padding: 2px 0 5px; }
.department-chat-messages .chat-history-more .button { font-size: .66rem; }
.department-chat-messages .chat-history-more small { display: block; margin: 0; font-size: .57rem; }
.internal-chat-load-error { display: grid; place-items: center; gap: 9px; min-height: 130px; padding: 18px; text-align: center; color: var(--muted); }
.internal-date-separator { display: flex; align-items: center; gap: 9px; margin: 3px 2px; color: #718078; }
.internal-date-separator::before, .internal-date-separator::after { content: ''; height: 1px; flex: 1 1 auto; background: #d6dfd8; }
.department-chat-messages .internal-date-separator span { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 23px; border: 1px solid #d8e1da; border-radius: 12px; padding: 3px 9px; background: rgba(255,255,255,.9); box-shadow: 0 1px 3px rgba(29,54,39,.05); font-size: .59rem; font-weight: 750; line-height: 1; }
.department-chat-messages article { min-width: 0; width: 100%; height: auto; max-width: 100%; max-height: none; box-sizing: border-box; border-left: 3px solid var(--green); border-radius: 8px; padding: 8px 9px; background: white; }
.department-chat-messages article.internal-author-message { border-left-color: var(--internal-author-color, var(--green)); }
.department-chat-messages article.internal-author-message .department-chat-message-header strong { color: var(--internal-author-color, #26332d); }
.department-chat-messages article.internal-author-tone-1 { --internal-author-color: #d81b60; }
.department-chat-messages article.internal-author-tone-2 { --internal-author-color: #00897b; }
.department-chat-messages article.internal-author-tone-3 { --internal-author-color: #3949ab; }
.department-chat-messages article.internal-author-tone-4 { --internal-author-color: #f57c00; }
.department-chat-messages article.internal-author-tone-5 { --internal-author-color: #7b1fa2; }
.department-chat-messages article.internal-author-tone-6 { --internal-author-color: #00838f; }
.department-chat-messages article.internal-author-tone-7 { --internal-author-color: #c62828; }
.department-chat-messages article.internal-author-tone-8 { --internal-author-color: #558b2f; }
.department-chat-messages article.internal-author-tone-9 { --internal-author-color: #6d4c41; }
.department-chat-messages article.internal-author-tone-10 { --internal-author-color: #455a64; }
.department-chat-message-header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.department-chat-message-header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.department-chat-source { flex: 0 0 auto; max-width: 110px; overflow: hidden; border: 1px solid #cfe1d2; border-radius: 999px; padding: 3px 7px; color: #245c3a; background: #edf8ec; font-size: .55rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.department-chat-delete { width: 24px; height: 24px; flex: 0 0 auto; color: #9a6473; opacity: .45; }
.department-chat-messages article:hover .department-chat-delete, .department-chat-delete:focus-visible { color: #c60062; background: #fff0f7; opacity: 1; }
.department-chat-delete .material-icon { width: 15px; height: 15px; }
.department-chat-messages strong, .department-chat-messages span, .department-chat-messages small { display: block; }
.department-chat-messages strong { font-size: .7rem; }.department-chat-messages span { max-width: 100%; margin-top: 3px; overflow-wrap: anywhere; word-break: break-word; font-size: .75rem; white-space: pre-wrap; }.department-chat-messages small { margin-top: 4px; color: var(--muted); font-size: .6rem; }
.internal-rich-text a { color: #0969da; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.internal-rich-text a:hover { color: #0550ae; }
.department-chat-messages .internal-rich-text .internal-mention { display: inline; margin: 0; border-radius: 4px; padding: 0 3px; color: #00b8d9; background: #eafbff; font-weight: 850; line-height: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.department-chat-messages .internal-rich-text .internal-mention-tone-2 { color: color-mix(in srgb, #00b8d9 90%, #061a3a 10%); }
.department-chat-messages .internal-rich-text .internal-mention-tone-3 { color: color-mix(in srgb, #00b8d9 80%, #061a3a 20%); }
.department-chat-messages .internal-rich-text .internal-mention-tone-4 { color: color-mix(in srgb, #00b8d9 70%, #061a3a 30%); }
.department-chat-messages .internal-rich-text .internal-mention-tone-5 { color: color-mix(in srgb, #00b8d9 60%, #061a3a 40%); }
.department-chat-messages .internal-rich-text .internal-mention-tone-6 { color: color-mix(in srgb, #00b8d9 50%, #061a3a 50%); }
.department-chat-messages .internal-rich-text .internal-mention-tone-7 { color: color-mix(in srgb, #00b8d9 40%, #061a3a 60%); }
.department-chat-messages .internal-rich-text .internal-mention-tone-8 { color: color-mix(in srgb, #00b8d9 30%, #061a3a 70%); }
.department-chat-messages .internal-rich-text .internal-mention-tone-9 { color: color-mix(in srgb, #00b8d9 20%, #061a3a 80%); }
.department-chat-messages .internal-rich-text .internal-mention-tone-10 { color: color-mix(in srgb, #00b8d9 10%, #061a3a 90%); }
.department-chat-messages .internal-rich-text .internal-mention-tone-11 { color: #061a3a; }
.internal-rich-text .emoji-glyph, .department-chat-messages .emoji-glyph, .internal-message .emoji-glyph { display: inline; margin: 0; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: 1.08em; font-style: normal; font-variant-emoji: emoji; line-height: inherit; vertical-align: -.06em; }
.department-chat-content form { display: grid; gap: 6px; }
.department-chat-content form[hidden] { display: none; }
.department-chat-composer { display: grid; grid-template-columns: 32px 32px 32px 32px minmax(0, 1fr) auto; gap: 3px; align-items: end; }
.department-chat-composer .composer-tool { width: 32px; height: 34px; margin: 0; color: #247653; }
.department-chat-composer textarea { min-height: 54px; max-height: 52vh; resize: none; }
.department-chat-composer .button { min-height: 36px; padding: 8px 10px; }
.department-chat-composer .department-chat-send { width: 36px; min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; padding: 0; }
.expandable-composer-field { --composer-base-height: 44px; --composer-growth: 0px; min-width: 0; display: grid; grid-template-rows: 9px auto; align-self: end; }
.internal-composer-field { --composer-base-height: 54px; position: relative; }
.internal-mention-suggestions { position: absolute; z-index: 64; right: 0; bottom: calc(100% - 7px); left: 0; max-height: min(310px, 42vh); display: grid; gap: 3px; overflow-y: auto; border: 1px solid #b9dfe8; border-radius: 12px; padding: 6px; background: #fff; box-shadow: 0 16px 38px rgba(8, 43, 61, .22); }
.internal-mention-suggestions.hidden { display: none; }
.internal-mention-edit-field { position: relative; display: block; }
.internal-mention-edit-field textarea { width: 100%; }
.internal-mention-edit-field .internal-mention-suggestions { top: calc(100% + 5px); right: 0; bottom: auto; left: 0; max-height: min(260px, 36vh); }
.internal-mention-option { width: 100%; min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; border: 0; border-radius: 8px; padding: 7px 8px; color: #243642; background: transparent; text-align: left; }
.internal-mention-option:hover, .internal-mention-option.active { color: #073852; background: #e7f8fc; }
.internal-mention-option .internal-user-avatar { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.internal-mention-option span, .internal-mention-option strong, .internal-mention-option small { min-width: 0; display: block; margin: 0; }
.internal-mention-option strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.internal-mention-option small { overflow: hidden; margin-top: 2px; color: #70818a; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.expandable-composer-field textarea { height: min(calc(var(--composer-base-height) + var(--composer-growth)), 52vh); margin: 0; overflow-y: auto; transition: height .08s ease-out; }
.expandable-composer-field.is-resizing textarea { transition: none; }
.composer-height-handle { position: relative; z-index: 2; width: 100%; height: 9px; display: grid; place-items: center; align-self: end; border: 0; border-radius: 8px 8px 0 0; padding: 0; color: #a7afaa; background: transparent; cursor: ns-resize; touch-action: none; }
.composer-height-handle::after { content: ''; width: 42px; height: 3px; border-radius: 999px; background: currentColor; transition: width .15s ease, color .15s ease; }
.composer-height-handle:hover, .composer-height-handle:focus-visible, .expandable-composer-field.is-resizing .composer-height-handle { color: #858e88; outline: none; }
.composer-height-handle:hover::after, .composer-height-handle:focus-visible::after, .expandable-composer-field.is-resizing .composer-height-handle::after { width: 58px; }
body.composer-height-resizing { cursor: ns-resize; user-select: none; }
.expandable-composer-field[data-height-step="0"] { --composer-growth: 0px; }
.expandable-composer-field[data-height-step="1"] { --composer-growth: 10px; }
.expandable-composer-field[data-height-step="2"] { --composer-growth: 20px; }
.expandable-composer-field[data-height-step="3"] { --composer-growth: 30px; }
.expandable-composer-field[data-height-step="4"] { --composer-growth: 40px; }
.expandable-composer-field[data-height-step="5"] { --composer-growth: 50px; }
.expandable-composer-field[data-height-step="6"] { --composer-growth: 60px; }
.expandable-composer-field[data-height-step="7"] { --composer-growth: 70px; }
.expandable-composer-field[data-height-step="8"] { --composer-growth: 80px; }
.expandable-composer-field[data-height-step="9"] { --composer-growth: 90px; }
.expandable-composer-field[data-height-step="10"] { --composer-growth: 100px; }
.expandable-composer-field[data-height-step="11"] { --composer-growth: 110px; }
.expandable-composer-field[data-height-step="12"] { --composer-growth: 120px; }
.expandable-composer-field[data-height-step="13"] { --composer-growth: 130px; }
.expandable-composer-field[data-height-step="14"] { --composer-growth: 140px; }
.expandable-composer-field[data-height-step="15"] { --composer-growth: 150px; }
.expandable-composer-field[data-height-step="16"] { --composer-growth: 160px; }
.expandable-composer-field[data-height-step="17"] { --composer-growth: 170px; }
.expandable-composer-field[data-height-step="18"] { --composer-growth: 180px; }
.expandable-composer-field[data-height-step="19"] { --composer-growth: 190px; }
.expandable-composer-field[data-height-step="20"] { --composer-growth: 200px; }
.expandable-composer-field[data-height-step="21"] { --composer-growth: 210px; }
.expandable-composer-field[data-height-step="22"] { --composer-growth: 220px; }
.expandable-composer-field[data-height-step="23"] { --composer-growth: 230px; }
.expandable-composer-field[data-height-step="24"] { --composer-growth: 240px; }
.expandable-composer-field[data-height-step="25"] { --composer-growth: 250px; }
.expandable-composer-field[data-height-step="26"] { --composer-growth: 260px; }
.expandable-composer-field[data-height-step="27"] { --composer-growth: 270px; }
.expandable-composer-field[data-height-step="28"] { --composer-growth: 280px; }
.internal-variable-menu { display: grid; gap: 6px; border: 1px solid #d8e4da; border-radius: 11px; padding: 8px; background: #fff; box-shadow: 0 8px 24px rgba(25,48,36,.08); }
.internal-variable-menu.hidden { display: none; }
.internal-variable-menu > small { color: #718078; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.internal-variable-menu > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.internal-variable-menu .variable-chip { min-width: 0; padding: 6px 7px; }
.internal-variable-menu .variable-chip code { overflow: hidden; font-size: .6rem; text-overflow: ellipsis; }
.internal-variable-menu .variable-chip span { font-size: .54rem; }
.department-chat-media-preview { display: grid; grid-template-columns: 48px minmax(0, 1fr) 32px; gap: 8px; align-items: center; border: 1px solid #d7e2da; border-radius: 10px; padding: 6px; background: white; }
.department-chat-media-preview img { width: 48px; height: 48px; border-radius: 7px; object-fit: cover; }
.department-chat-media-preview > i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 7px; color: #397557; background: #eef6f0; }
.department-chat-media-preview > i .material-icon { width: 22px; height: 22px; }
.department-chat-media-preview span { overflow: hidden; color: #59665f; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.department-chat-media-preview.audio-preview { grid-template-columns: minmax(0, 1fr) auto 32px; }
.department-chat-media-preview.audio-preview audio { width: 100%; min-width: 0; height: 36px; }
.department-chat-media-preview.audio-preview span { display: none; }
.department-chat-media-preview.audio-preview .recorded-audio-duration { display: block; }
.department-chat-audio { display: block; width: 100%; height: 36px; margin-top: 6px; }
.department-chat-attachment { display: flex; gap: 8px; align-items: center; margin: 7px 0; border: 1px solid rgba(40,88,62,.14); border-radius: 9px; padding: 9px; color: #2d6548; background: rgba(255,255,255,.7); font-size: .7rem; font-weight: 750; text-decoration: none; }
.department-chat-attachment .material-icon { width: 19px; height: 19px; flex: 0 0 auto; }
.department-chat-image { display: inline-flex; width: fit-content; max-width: 100%; margin-top: 6px; border-radius: 8px; overflow: hidden; background: #eef3ed; vertical-align: top; }
.department-chat-image img { display: block; width: auto; height: auto; max-width: min(320px, 100%); max-height: 220px; border-radius: 8px; object-fit: contain; }
.department-chat-content textarea { min-height: 58px; margin: 0; padding: 8px; font-size: .73rem; }
.internal-chat-standalone .operator-inbox { display: block; height: 100dvh; border-top: 0; }
.internal-chat-standalone .operator-list-pane, .internal-chat-standalone .operator-chat-pane, .internal-chat-standalone .expand-list, .internal-chat-standalone .conversation-context-menu { display: none !important; }
.internal-chat-standalone .department-chat-drawer { position: fixed; inset: 0; width: 100% !important; height: 100dvh; border: 0; transform: none; box-shadow: none; transition: none; }
.internal-chat-standalone .department-chat-resize-handle, .internal-chat-standalone .department-chat-tab, .internal-chat-standalone #openDepartmentChatStandalone { display: none !important; }
.internal-chat-standalone .department-chat-content { gap: 5px; padding: clamp(14px, 2vw, 28px); }
.internal-chat-standalone .department-chat-content > header { min-height: 42px; padding-bottom: 9px; border-bottom: 1px solid #dfe7e0; }
.internal-chat-standalone .department-chat-messages { padding: clamp(10px, 1.4vw, 20px); }
.internal-chat-standalone .department-chat-composer textarea { min-height: 64px; }
.chat-policy { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; margin: 0; font-size: .68rem; }
.chat-policy select { padding: 7px; font-size: .68rem; }
.private-people-list { max-height: min(520px, 65vh); display: grid; gap: 6px; overflow-y: auto; }
.private-people-list > button { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; align-items: center; border: 1px solid #dfe6df; border-radius: 10px; padding: 8px 10px; color: inherit; background: #fbfcfa; text-align: left; }
.private-people-list > button:hover { border-color: #99c84a; background: #f3fae8; }
.private-people-list img { width: 36px; height: 36px; border-radius: 9px; object-fit: contain; background: #8cff00; }
.private-people-list strong, .private-people-list small { display: block; }.private-people-list strong { font-size: .76rem; }.private-people-list small { margin-top: 3px; color: var(--muted); font-size: .65rem; }
.internal-seen-by-list { max-height: min(470px, 60vh); display: grid; gap: 7px; overflow-y: auto; }
.internal-seen-by-list > article { display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; gap: 9px; align-items: center; border: 1px solid #dfe6df; border-radius: 10px; padding: 8px 10px; background: #fbfcfa; }
.internal-seen-by-list .internal-user-avatar { width: 38px; height: 38px; }
.internal-seen-by-list strong, .internal-seen-by-list small { display: block; }
.internal-seen-by-list strong { font-size: .76rem; }.internal-seen-by-list small { margin-top: 3px; color: var(--muted); font-size: .65rem; }
.internal-seen-by-list > article > .material-icon { width: 18px; height: 18px; color: #2f9461; }
.notification-sound-toggle { display: flex; gap: 10px; align-items: center; margin: 14px 0 2px; border: 1px solid #dce6de; border-radius: 11px; padding: 11px 12px; background: #f7faf5; }
.notification-sound-toggle input { width: 19px; height: 19px; margin: 0; accent-color: #7dc522; }.notification-sound-toggle strong, .notification-sound-toggle small { display: block; }.notification-sound-toggle strong { font-size: .78rem; }.notification-sound-toggle small { margin-top: 3px; color: var(--muted); font-size: .66rem; line-height: 1.35; }
.notification-sound-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 10px; border: 1px solid #dce6de; border-radius: 11px; padding: 11px 12px; background: #fbfcfa; }
.notification-sound-setting strong, .notification-sound-setting small { display: block; }.notification-sound-setting strong { font-size: .78rem; }.notification-sound-setting small { max-width: 360px; margin-top: 3px; color: var(--muted); font-size: .66rem; line-height: 1.35; }
.notification-sound-controls { display: grid; grid-template-columns: minmax(145px, 1fr) auto; gap: 7px; align-items: center; }.notification-sound-controls select { min-width: 145px; margin: 0; padding: 8px 10px; font-size: .72rem; }.notification-sound-controls .button { min-height: 36px; margin: 0; }
.emoji-palette { display: flex; gap: 4px; flex-wrap: wrap; }
.emoji-catalog-overlay { position: fixed; z-index: 2147483647; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(17,27,22,.48); backdrop-filter: blur(3px); }
.emoji-catalog { width: min(720px, 100%); max-height: min(720px, calc(100vh - 40px)); display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); overflow: hidden; border: 1px solid #d8e1da; border-radius: 18px; background: white; box-shadow: 0 26px 80px rgba(19,38,29,.26); }
.emoji-catalog > header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px; }
.emoji-catalog > header strong, .emoji-catalog > header small { display: block; }.emoji-catalog > header strong { font-size: 1rem; }.emoji-catalog > header small { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.emoji-search { position: relative; margin: 0 14px 10px; }.emoji-search > span { position: absolute; z-index: 1; left: 12px; top: 10px; color: #718078; }.emoji-search input { height: 40px; margin: 0; padding-left: 40px; }
.emoji-categories { display: flex; gap: 5px; overflow-x: auto; padding: 0 14px 9px; scrollbar-width: thin; }
.emoji-categories button { flex: 0 0 auto; border: 1px solid #dde5df; border-radius: 18px; padding: 6px 10px; color: #66736c; background: white; font-size: .68rem; font-weight: 750; }.emoji-categories button.active { border-color: #8fc22a; color: #47700c; background: #eff8dc; }
.emoji-catalog-status { padding: 0 16px 8px; color: var(--muted); font-size: .65rem; }
.emoji-catalog-grid { display: grid; grid-template-columns: repeat(12, minmax(38px, 1fr)); gap: 3px; align-content: start; overflow-y: auto; padding: 5px 14px 16px; }
.emoji-catalog-grid button { min-width: 0; height: 44px; border: 0; border-radius: 9px; padding: 3px; background: transparent; font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 1.55rem; }.emoji-catalog-grid button:hover, .emoji-catalog-grid button:focus-visible { background: #eef6ea; outline: 2px solid rgba(155,197,43,.35); }
.emoji-catalog-grid p { grid-column: 1 / -1; color: var(--muted); text-align: center; }
.quick-reply-image-preview { display: flex; gap: 10px; align-items: center; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.quick-reply-image-preview img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; }
.quick-reply-image-preview.audio-preview audio { width: min(360px, 100%); height: 38px; }
.quick-reply-image-preview .icon-button { margin-left: auto; }
.active-message-media-tools { display: flex; gap: 8px; align-items: center; }
.active-message-media-tools label { width: auto; cursor: pointer; }
.active-message-media-tools input { display: none; }
.operator-emoji-preview { display: flex; gap: 9px; align-items: center; justify-content: center; min-height: 92px; margin: 16px 0; border: 1px solid var(--line); border-radius: 14px; background: #f8faf6; }
.operator-emoji-preview img { width: 42px; height: 42px; border-radius: 9px; object-fit: contain; }
.operator-emoji-preview span { font-family: "Segoe UI Emoji", sans-serif; font-size: 1.7rem; }
.conversation-log-list { max-height: 440px; overflow: auto; display: grid; gap: 8px; margin-bottom: 14px; }
.conversation-log-list article { display: grid; grid-template-columns: 10px 1fr; gap: 10px; border: 1px solid #e2e7e3; border-radius: 10px; padding: 10px; }
.conversation-log-list article > i { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--green); }
.conversation-log-list article[data-role="superadmin"] > i { background: var(--pink); }
.conversation-log-list article[data-role="manager"] > i { background: #1aaed1; }
.conversation-log-list strong, .conversation-log-list span, .conversation-log-list small { display: block; }
.conversation-log-list strong { font-size: .73rem; }.conversation-log-list span { margin-top: 3px; font-size: .78rem; }.conversation-log-list small { margin-top: 5px; color: var(--muted); font-size: .63rem; }
.conversation-log-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.conversation-log-form textarea { min-height: 72px; margin: 0; }

@media (max-width: 980px) {
  .chat-context-strip { grid-template-columns: 1fr; max-height: 300px; }
}

@media (max-width: 620px) {
  .chat-context-strip { padding: 8px; }
  .chat-postit, .chat-department-info { grid-template-columns: 1fr; }
  .chat-context-actions { align-items: stretch; flex-direction: column; }
  .chat-context-actions .button { width: 100%; }
  .department-info-editor { grid-template-columns: 1fr; }
  .emoji-catalog-overlay { padding: 8px; }
  .emoji-catalog { max-height: calc(100vh - 16px); border-radius: 14px; }
  .emoji-catalog-grid { grid-template-columns: repeat(7, minmax(38px, 1fr)); padding-inline: 8px; }
}

.contacts-page { min-height: calc(100vh - 64px); }
.operator-inbox-mode .operator-contacts-page { height: 100vh; min-height: 0; max-height: 100vh; overflow-x: hidden; overflow-y: scroll; scrollbar-gutter: stable; overscroll-behavior-y: contain; touch-action: pan-y; padding: 28px 3.5%; background: #f4f5f0; }
.contacts-card { padding: 0; overflow: hidden; }
.contacts-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); }
.contact-list { display: grid; }
.contact-item { display: grid; grid-template-columns: minmax(240px, 1.1fr) minmax(200px, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid #edf0eb; }.contact-item:last-child { border-bottom: 0; }
.contact-item:hover { background: #f8faf6; }
.contact-profile { display: flex; gap: 12px; align-items: center; min-width: 0; border: 0; padding: 0; color: inherit; background: transparent; text-align: left; }
.contact-profile > span:last-child { min-width: 0; }.contact-profile strong, .contact-profile small, .contact-notes strong, .contact-notes span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.contact-profile small, .contact-notes span { margin-top: 4px; color: var(--muted); font-size: .72rem; }
.contact-company-inline { display: inline !important; color: #607068; font-weight: 650; }
.contact-notes { min-width: 0; }.contact-notes strong { font-size: .8rem; }
.contact-actions, .modal-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.modal-backdrop { position: fixed; inset: 0; z-index: 2147483647; display: grid; align-items: start; justify-items: center; overflow-x: hidden; overflow-y: auto; padding: 20px; overscroll-behavior-y: contain; background: rgba(17,25,30,.55); backdrop-filter: blur(2px); }
.contact-modal { width: min(680px, 100%); max-height: calc(100vh - 40px); margin: auto; overflow-x: hidden; overflow-y: scroll; scrollbar-gutter: stable; overscroll-behavior-y: contain; touch-action: pan-y; box-shadow: 0 24px 70px rgba(15,24,29,.28); }
.contact-modal .section-title p { margin: 4px 0 0; color: var(--muted); font-size: .76rem; }.contact-modal textarea { resize: vertical; }
.repeated-message-education { position: relative; display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 26px; align-items: center; padding: 10px; }
.repeated-message-education img { width: 190px; height: 190px; object-fit: contain; }
.repeated-message-education h2 { margin: 7px 0 10px; font-size: 1.45rem; }
.repeated-message-education p { margin: 0 0 20px; color: var(--muted); line-height: 1.55; }
.repeated-message-close { position: absolute; right: -4px; top: -4px; }
.image-lightbox-backdrop { position: fixed; z-index: 2147483647; inset: 0; display: grid; place-items: center; padding: clamp(12px, 3vw, 36px); background: rgba(7,12,10,.88); backdrop-filter: blur(5px); }
.image-lightbox-modal { position: relative; display: grid; place-items: center; width: fit-content; max-width: 100%; max-height: 100%; overflow: hidden; border-radius: 14px; background: #111713; box-shadow: 0 28px 90px rgba(0,0,0,.5); }
.image-lightbox-modal img { display: block; width: auto; height: auto; max-width: calc(100vw - clamp(24px, 6vw, 72px)); max-height: calc(100vh - clamp(24px, 6vw, 72px)); object-fit: contain; }
.image-lightbox-close { position: absolute; z-index: 1; top: 10px; right: 10px; color: white; border-color: rgba(255,255,255,.35); background: rgba(8,14,11,.72); box-shadow: 0 4px 16px rgba(0,0,0,.28); }
.modal-backdrop [data-close-modal].icon-button, .emoji-catalog [data-close-emoji].icon-button, .image-lightbox-close { border: 1px solid #b9273d; color: #fff; background: #d83b51; box-shadow: 0 5px 14px rgba(197,59,80,.24); }
.modal-backdrop [data-close-modal].icon-button:hover, .emoji-catalog [data-close-emoji].icon-button:hover, .image-lightbox-close:hover { color: #fff; background: #b9273d; transform: translateY(-1px); }
.modal-backdrop [data-close-modal].icon-button:focus-visible, .emoji-catalog [data-close-emoji].icon-button:focus-visible, .image-lightbox-close:focus-visible { outline: 3px solid rgba(216,59,81,.25); outline-offset: 2px; }
.info-banner { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; border: 1px solid #dce9ba; border-radius: 12px; padding: 14px; color: #4d6417; background: var(--green-soft); font-size: .83rem; line-height: 1.5; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: 380px; transform: translateY(24px); opacity: 0; pointer-events: none; border-radius: 11px; padding: 12px 16px; color: white; background: #263038; box-shadow: var(--shadow); transition: .25s; }
.toast.show { transform: translateY(0); opacity: 1; }.toast.error { z-index: 2147483647; background: var(--danger); }
.code-block { overflow: auto; border-radius: 10px; padding: 14px; color: #dce5e9; background: #222a30; font: .78rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }

@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .inbox { grid-template-columns: 310px 1fr; }
  .settings-grid, .typebot-hub { grid-template-columns: 1fr; }.settings-grid .full { grid-column: auto; }
  .flow-editor-layout { grid-template-columns: 1fr; }
  .flow-inspector { max-height: none; }
  .operator-inbox { grid-template-columns: 340px minmax(0, 1fr); }
  .transfer-panel, .transfer-panel.without-assignee { grid-template-columns: 1fr 1fr; }.transfer-intro, .transfer-reason-field, .transfer-panel .button-group { grid-column: 1 / -1; }.transfer-actions { display: flex; justify-content: flex-end; }.transfer-actions .button { width: auto; min-width: 96px; }
  .inbox-launcher { grid-template-columns: 1fr; }.inbox-launch-visual { min-height: 180px; }
}
@media (max-width: 820px) {
  .login-shell { grid-template-columns: 1fr; }.login-brand { display: none; }.login-panel { padding: 30px 22px; }
  .sidebar { transform: translateX(-100%); transition: transform .22s; }.sidebar.open { transform: translateX(0); }
  .mobile-topbar { position: sticky; top: 0; z-index: 12; height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--line); background: white; }
  .main-content { margin-left: 0; padding: 18px 14px; }.page-header { align-items: flex-start; flex-direction: column; }
  .inbox { grid-template-columns: 1fr; min-height: 650px; }.conversation-pane { border-right: 0; }.chat-pane { position: fixed; inset: 60px 0 0; z-index: 11; }.chat-pane.mobile-hidden { display: none; }
  .messages { max-height: none; }.mobile-back { display: inline-grid !important; }.flow-canvas { grid-template-columns: 1fr 1fr; }.provider-options { grid-template-columns: 1fr; }
  .flow-viewport { height: 590px; }
  .operator-inbox-mode .main-content { padding: 0; }
  .operator-inbox { position: relative; grid-template-columns: 1fr; }
  .operator-chat-pane { position: fixed; inset: 0; z-index: 30; }
  .operator-chat-pane.mobile-hidden { display: none; }
  .operator-chat-header { padding: 9px 10px; }.operator-chat-header .status-badge { display: none; }
  .department-chat-drawer { position: fixed; width: min(340px, calc(100vw - 36px)) !important; }
  .department-chat-resize-handle { display: none; }
  .operator-messages .message-bubble { max-width: 86%; }
  .operator-contacts-page { padding: 20px 14px; }
  .contact-item { grid-template-columns: 1fr auto; }.contact-notes { grid-column: 1 / -1; grid-row: 2; }.contact-actions { grid-column: 2; grid-row: 1; }
  .team-item { grid-template-columns: 44px 1fr auto; }.team-item > .button { grid-column: 2 / -1; justify-self: start; }
  .department-list { grid-template-columns: 1fr; }.inline-form { width: 100%; }.inline-form input { flex: 1; min-width: 0; }
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.stat-card { padding: 13px; }.stat-card .stat-value { font-size: 1.35rem; }
  .form-grid { grid-template-columns: 1fr; }.form-grid .full { grid-column: auto; }.flow-canvas { grid-template-columns: 1fr; padding: 18px; }.flow-node:nth-last-child(-n+3)::after { display: block; }.flow-node:last-child::after { display: none; }
  .flow-toolbar .spacer { display: none; }.flow-toolbar .btn { flex: 1 1 calc(50% - 7px); }
  .flow-inspector { padding: 13px; }.route-editor { grid-template-columns: 45px minmax(0, 1fr) 32px; }.route-editor select { grid-column: 1 / 3; }
  .operator-brand { padding: 10px 12px; }.operator-account > span:nth-child(2) { display: none; }
  .operator-chat-header .button { padding: 7px 9px; font-size: .72rem; }.operator-chat-header .chat-header-copy span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .operator-composer { grid-template-columns: repeat(5, 32px) minmax(0, 1fr) 42px; gap: 1px; padding: 8px 4px; }.send-button { min-width: 0; width: 40px; padding: 0; }.send-button span { display: none; }.send-button .material-icon { width: 19px; height: 19px; }
  .operator-composer textarea { min-width: 0; padding: 10px 11px; }
  .operator-chat-header { overflow-x: auto; }
  .operator-chat-header { scrollbar-width: none; }
  .operator-chat-header::-webkit-scrollbar { display: none; }
  .operator-chat-header > * { flex: 0 0 auto; }
  .operator-chat-header .chat-contact-button { flex-basis: 116px; max-width: 116px; }
  .quick-reply-menu { width: min(310px, calc(100vw - 20px)); }
  .contacts-toolbar, .contact-item { grid-template-columns: 1fr; }.contact-notes, .contact-actions { grid-column: auto; grid-row: auto; }.contact-actions { justify-content: flex-start; }
  .modal-backdrop { padding: 8px; }.contact-modal { max-height: calc(100vh - 16px); }
  .team-summary { grid-template-columns: 1fr; }.transfer-panel, .transfer-panel.without-assignee { grid-template-columns: 1fr; }.transfer-intro, .transfer-reason-field, .transfer-panel .button-group { grid-column: auto; }.transfer-actions { display: grid; grid-template-columns: 1fr 1fr; }.transfer-actions .button { width: 100%; }.service-hours-times { grid-template-columns: 1fr; }
}
.mobile-back { display: none; }

/* Contatos, perfil interno e disparos em massa */
.internal-user-avatar { width: 38px; height: 38px; flex: 0 0 auto; border: 2px solid #fff; border-radius: 50%; object-fit: cover; background: #eef4e8; box-shadow: 0 2px 9px rgba(35,63,48,.14); }
.department-chat-message-header .internal-user-avatar { width: 16px; height: 16px; border-width: 1px; box-shadow: none; }
.department-chat-message-header strong { margin-right: auto; }
.private-chat-context .internal-user-avatar { width: 34px; height: 34px; }
.operator-profile-photo { border-radius: 50%; object-fit: cover; background: #eef4e8; }
.internal-profile-photo-setting { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 15px; align-items: start; margin-top: 14px; border: 1px solid #dce6de; border-radius: 13px; padding: 14px; background: #fbfcfa; }
.internal-profile-photo-setting .internal-user-avatar { width: 72px; height: 72px; }
.internal-profile-photo-setting strong, .internal-profile-photo-setting p { display: block; }
.internal-profile-photo-setting p { margin: 5px 0 11px; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.internal-profile-photo-setting .button + .button { margin-left: 5px; }

.contacts-toolbar { grid-template-columns: minmax(220px,1fr) auto auto; }
.contact-filter-panel { display: grid; grid-template-columns: repeat(6,minmax(120px,1fr)); gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #f8faf6; }
.contact-filter-panel.compact-hidden { display: none; }
.contact-filter-panel label { display: grid; gap: 5px; color: #5e6c64; font-size: .68rem; font-weight: 750; }
.contact-filter-panel select { margin: 0; }
.contact-item { grid-template-columns: minmax(220px,1.1fr) minmax(170px,.9fr) minmax(128px,auto) auto; }
.contact-item.is-blocked { background: #fff8f8; }
.contact-item.is-blocked:hover { background: #fff2f3; }
.contact-blocked-badge { display: inline !important; margin-left: 5px; border: 1px solid #efbcc4; border-radius: 999px; padding: 2px 6px; color: #a82439; background: #fff0f3; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.message-delivery-failed { display: inline-grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; color: #fff; background: var(--danger); font-size: .62rem; font-style: normal; font-weight: 900; }
.operator-inbox-mode .operator-contacts-page { padding: 16px 2.7% 22px; }
.operator-contacts-page .page-header { align-items: center; margin-bottom: 13px; }
.operator-contacts-page .page-header h1 { margin-top: 2px; font-size: 1.55rem; }
.operator-contacts-page .page-header p { margin-top: 3px; font-size: .82rem; }
.operator-contacts-page .page-actions .button { min-height: 38px; padding: 8px 13px; font-size: .74rem; }
.operator-contacts-page .contacts-toolbar { gap: 9px; padding: 9px 12px; }
.operator-contacts-page .contacts-toolbar .search-box input { height: 40px; padding-block: 8px; }
.operator-contacts-page .contact-filter-panel { gap: 8px; padding: 8px 12px 9px; }
.operator-contacts-page .contact-filter-panel label { gap: 3px; font-size: .62rem; }
.operator-contacts-page .contact-filter-panel select { height: 38px; padding: 7px 10px; font-size: .7rem; }
.contact-type-field { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; border: 0; padding: 0; }
.contact-type-field legend { width: 100%; margin-bottom: 5px; color: #4f5954; font-size: .78rem; font-weight: 800; }
.contact-type-field label { min-height: 44px; flex: 1 1 150px; display: flex; gap: 9px; align-items: center; margin: 0; border: 1px solid var(--line); border-radius: 11px; padding: 10px 13px; background: #fff; cursor: pointer; }
.contact-type-field label:has(input:checked) { border-color: #8bca16; background: #f3ffe4; box-shadow: 0 0 0 2px rgba(139,202,22,.12); }
.contact-type-field input { width: 17px; height: 17px; margin: 0; accent-color: #77b900; }
.status-badge.private { border: 1px solid #d8c8f6; color: #6c3eb8; background: #f4efff; white-space: nowrap; }
.operator-contacts-page .contact-item { gap: 11px; min-height: 58px; padding: 8px 12px; }
.operator-contacts-page .contact-profile { gap: 9px; }
.operator-contacts-page .contact-profile .contact-avatar { width: 36px; height: 36px; }
.operator-contacts-page .contact-profile strong { font-size: .76rem; }
.operator-contacts-page .contact-profile small, .operator-contacts-page .contact-notes span { margin-top: 2px; font-size: .64rem; }
.operator-contacts-page .contact-notes strong { font-size: .73rem; }
.operator-contacts-page .contact-flag-button { min-height: 30px; padding: 5px 8px; font-size: .63rem; }
.operator-contacts-page .contact-actions { gap: 5px; flex-wrap: wrap; }
.operator-contacts-page .contact-actions .button { min-height: 31px; padding: 6px 9px; font-size: .64rem; white-space: nowrap; }
.contacts-pagination { min-height: 52px; display: flex; gap: 14px; align-items: center; justify-content: flex-end; border-top: 1px solid var(--line); padding: 9px 12px; color: #647169; background: #fafcf8; font-size: .68rem; }
.contacts-pagination label, .contacts-pagination > div { display: flex; gap: 7px; align-items: center; margin: 0; }
.contacts-pagination select { width: auto; min-width: 72px; height: 34px; margin: 0; padding: 5px 9px; font-size: .68rem; }
.contacts-pagination .button { min-height: 32px; padding: 6px 10px; }
.contact-flag-button { min-height: 34px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; border: 1px solid #dbe3dd; border-radius: 999px; padding: 6px 10px; color: #6c7972; background: white; font-size: .69rem; font-weight: 750; }
.contact-flag-button .material-icon { width: 16px; height: 16px; }
.contact-flag-button.flag-urgent { color:#c5213d;border-color:#efb4bf;background:#fff4f6 }.contact-flag-button.flag-follow_up { color:#a56608;border-color:#f0d292;background:#fff9e9 }.contact-flag-button.flag-candidate { color:#16739b;border-color:#a8d9eb;background:#f1fbff }.contact-flag-button.flag-company { color:#426e12;border-color:#bee48d;background:#f5ffe8 }.contact-flag-button.flag-document_pending { color:#7857a8;border-color:#d8c7ef;background:#faf7ff }.contact-flag-button.flag-new_client { color:#ad2b79;border-color:#efb5d7;background:#fff3fa }.contact-flag-button.flag-blacklist { color:#fff;border-color:#111;background:#111 }
.contact-flag-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 16px 0; }
.contact-flag-options .flag-option { position: relative; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0,1fr) 16px; gap: 10px; align-items: center; margin: 0; border: 1px solid currentColor; border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: .78rem; font-weight: 800; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.contact-flag-options .flag-option:hover { transform: translateY(-1px); filter: saturate(1.08); box-shadow: 0 8px 20px rgba(30,45,37,.08); }
.contact-flag-options .flag-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.contact-flag-options .flag-option i { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 10px; background: rgba(255,255,255,.7); }
.contact-flag-options .flag-option i::before { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-radius: 50%; }
.contact-flag-options .flag-option::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; opacity: .45; }
.contact-flag-options .flag-option:has(input:checked) { box-shadow: inset 4px 0 currentColor, 0 9px 22px rgba(30,45,37,.1); }
.contact-flag-options .flag-option:has(input:checked)::after { opacity: 1; background: currentColor; box-shadow: inset 0 0 0 3px #fff; }
.contact-flag-options .flag-option.flag-blacklist:has(input:checked)::after { background: #fff; box-shadow: inset 0 0 0 3px #111; }
.contact-flag-options .flag-option:has(input:focus-visible) { outline: 3px solid rgba(117,157,18,.2); outline-offset: 2px; }
.contact-flag-options .flag-none { color: #647168; background: #f5f7f5; }
.contact-flag-options .blacklist-readonly { grid-column: 1 / -1; margin: 0; }

.broadcast-page { min-height: calc(100vh - 64px); }
.operator-inbox-mode .broadcast-page { height: 100vh; min-height: 0; max-height: 100vh; padding: 28px 3.5%; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; background: #f4f5f0; }
.broadcast-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(280px,1fr); gap: 18px; align-items: start; }
.broadcast-selection-card, .broadcast-history-card { padding: 18px; }
.broadcast-selection-card .search-box { margin-bottom: 10px; }
.broadcast-contact-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; align-items: center; }
.broadcast-contact-toolbar .search-box { margin-bottom: 0; }
.broadcast-contact-filter-panel { margin: 10px 0 0; border: 1px solid #e0e7e1; border-radius: 11px; padding: 10px; background: #f8faf6; }
.broadcast-contact-filter-panel label { margin: 0; }
.broadcast-select-all { display: flex; gap: 8px; align-items: center; border: 1px solid #dce6de; border-radius: 10px; padding: 9px 11px; color: #536159; background: #f8faf6; font-size: .72rem; font-weight: 750; }
.broadcast-select-all input, .broadcast-contact-choice input { width: 18px; height: 18px; margin: 0; accent-color: #72b917; }
.broadcast-contact-list { max-height: none; display: grid; align-content: start; gap: 0; margin-top: 9px; overflow: visible; border: 1px solid #e0e7e1; border-radius: 11px; padding: 0; background: #fff; }
.broadcast-contact-choice { display: grid; grid-template-columns: 20px 42px minmax(0,1fr) auto; gap: 9px; align-items: center; min-height: 58px; margin: 0; border: 0; border-bottom: 1px solid #e7ece8; border-radius: 0; padding: 8px 10px; background: #fff; }
.broadcast-contact-choice:first-child { border-radius: 10px 10px 0 0; }
.broadcast-contact-choice:last-child { border-bottom: 0; border-radius: 0 0 10px 10px; }
.broadcast-contact-choice:has(input:checked) { border-color: #99c84a; background: #f4faea; box-shadow: inset 3px 0 #7ec321; }
.broadcast-contact-choice .contact-avatar { width: 40px; height: 40px; }
.broadcast-contact-choice strong, .broadcast-contact-choice small { display: block; }
.broadcast-contact-choice strong { font-size: .77rem; }.broadcast-contact-choice small { margin-top: 3px; color: var(--muted); font-size: .66rem; }
.broadcast-contact-summary { min-width: 0; }
.broadcast-contact-summary strong, .broadcast-contact-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.broadcast-contact-notes { color: #4e5f55 !important; font-weight: 700; }
.broadcast-contact-markers { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.broadcast-sent-indicator { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%; color: #287245; background: #daf2df; box-shadow: inset 0 0 0 1px #a8d8b5; }
.broadcast-sent-indicator .material-icon { width: 16px; height: 16px; }
.broadcast-contact-pagination { margin-top: 0; border: 1px solid #e0e7e1; border-top: 0; border-radius: 0 0 11px 11px; }
.broadcast-contact-list:has(+ .broadcast-contact-pagination) { border-radius: 11px 11px 0 0; }
.broadcast-contact-context-menu { width: 190px; min-width: 190px; }
.broadcast-contact-context-menu > button.active { color: #246d42; background: #e8f6e7; }
.broadcast-contact-context-menu > small { padding: 4px 7px 2px; color: #68766e; font-size: .58rem; line-height: 1.35; }
.broadcast-sent-toggle-indicator { width: 18px; height: 18px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid #a9b7ad; border-radius: 5px; background: #fff; }
.broadcast-contact-context-menu > button.active .broadcast-sent-toggle-indicator { border-color: #66a941; color: white; background: #66a941; }
.broadcast-sent-toggle-indicator .material-icon { width: 14px; height: 14px; }
.broadcast-selection-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

.backup-page { min-height: calc(100vh - 64px); }
.operator-inbox-mode .backup-page { height: 100vh; min-height: 0; max-height: 100vh; padding: 28px 3.5%; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; background: #f4f5f0; }
.backup-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; }
.backup-grid > .card { min-width: 0; padding: 18px; }
.backup-link-card .section-title > .material-icon, .backup-schedule-card .section-title > .material-icon, .backup-import-card .section-title > .material-icon { width: 28px; height: 28px; color: #60901f; }
.backup-inline-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }
.backup-inline-actions small { margin-right: auto; color: var(--muted); font-size: .66rem; }
.backup-schedule-card form { display: grid; gap: 12px; }
.backup-schedule-status { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.backup-schedule-status span { display: grid; gap: 4px; border: 1px solid #e0e7e1; border-radius: 10px; padding: 10px; color: #59675f; background: #f8faf7; font-size: .68rem; }
.backup-schedule-status b { color: #2f3a34; font-size: .62rem; text-transform: uppercase; }
.backup-file-picker { display: grid; gap: 7px; }
.backup-file-picker input { padding: 9px; background: #fbfcfa; }
.backup-import-card > .button { margin-top: 12px; }
.backup-safety-note { margin: 12px 0 0; border-left: 3px solid #84b834; padding: 8px 10px; color: #56655c; background: #f5f9ed; font-size: .67rem; line-height: 1.5; }
.backup-list-card { grid-column: 1 / -1; }
.backup-list { display: grid; gap: 8px; }
.backup-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid #dfe7e0; border-radius: 12px; padding: 12px; background: #fbfcfa; }
.backup-item-main { min-width: 0; }
.backup-item-main strong, .backup-item-main small { display: block; }
.backup-item-main strong { margin-top: 5px; font-size: .8rem; }
.backup-item-main small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.backup-source { width: fit-content; border-radius: 999px; padding: 3px 7px; color: #41671b; background: #eaf6dc; font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.backup-item-actions { display: flex; gap: 7px; align-items: center; }
.backup-link-card .webhook-box code { user-select: all; }
@media (max-width: 800px) {
  .backup-grid { grid-template-columns: 1fr; }
  .backup-list-card { grid-column: auto; }
  .backup-item { grid-template-columns: 1fr; }
  .backup-item-actions { justify-content: flex-start; flex-wrap: wrap; }
  .backup-schedule-status { grid-template-columns: 1fr; }
}
.broadcast-history { display: grid; gap: 8px; }
.broadcast-history-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px 12px; border: 1px solid #e0e6e1; border-radius: 12px; padding: 12px; background: #fbfcfa; }
.broadcast-history-item > div:first-child { display: grid; gap: 4px; }.broadcast-history-item strong { font-size: .78rem; }.broadcast-history-item small { color: var(--muted); font-size: .64rem; }
.broadcast-status { width: fit-content; border-radius: 999px; padding: 3px 7px; color: #526057; background: #eef2ee; font-size: .59rem; font-weight: 850; text-transform: uppercase; }
.broadcast-status.is-sending { color:#176b49;background:#dcf3e6 }.broadcast-status.is-completed { color:#456d12;background:#e8f8d2 }.broadcast-status.is-cancelled { color:#a2293d;background:#ffe8ec }.broadcast-status.is-queued { color:#805f15;background:#fff4cd }
.broadcast-history-numbers { display: flex; gap: 8px; align-items: center; }.broadcast-history-numbers span { display: grid; justify-items: center; color: var(--muted); font-size: .58rem; }.broadcast-history-numbers b { color:#27332d;font-size:.78rem }
.broadcast-history-actions { grid-column: 1 / -1; display: flex; gap: 7px; justify-content: flex-end; flex-wrap: wrap; }
.broadcast-history-actions .button.icon-only { width: 32px; min-width: 32px; height: 32px; border-radius: 8px; }
.broadcast-history-actions .material-icon { width: 18px; height: 18px; }
.broadcast-history-actions .button:disabled { opacity: .34; cursor: not-allowed; }
.broadcast-history-item.is-legacy { background: #f6f7f5; }
.legacy-history-label { color: #7f8883 !important; font-weight: 800; }
.triage-history-label { color: #2f741a !important; font-weight: 800; }
.broadcast-history-pagination { margin-top: 10px; }
.triage-template-detail, .triage-template-preview { display: grid; gap: 6px; border: 1px solid #dce7d3; border-radius: 12px; padding: 13px; background: #f8fcf3; }
.triage-template-detail small, .triage-template-preview small { color: #578326; font-size: .62rem; font-weight: 900; letter-spacing: .04em; }
.triage-template-detail strong, .triage-template-preview strong { font-size: .79rem; }
.triage-template-detail p, .triage-template-preview p { margin: 0; color: #405047; font-size: .72rem; line-height: 1.5; white-space: pre-wrap; }
.meta-template-list { max-height: 52vh; display: grid; gap: 8px; margin: 14px 0; overflow-y: auto; }
.meta-template-card { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; align-items: start; margin: 0; border: 1px solid #dde5df; border-radius: 12px; padding: 12px; background: #fff; cursor: pointer; }
.meta-template-card:has(input:checked) { border-color: #84bd35; background: #f4faeb; box-shadow: inset 3px 0 #83c328; }
.meta-template-card input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #74b61d; }
.meta-template-card strong, .meta-template-card small { display: block; }
.meta-template-card small { margin-top: 3px; color: #5f7466; font-size: .63rem; }
.meta-template-card p { max-height: 82px; margin: 7px 0 0; overflow: hidden; color: #536159; font-size: .69rem; line-height: 1.45; white-space: pre-wrap; }
.template-binding-row > span { color: #4e6e30; font-size: .68rem; font-weight: 850; }
.triage-binding-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.triage-binding-summary > span { display: grid; gap: 2px; border: 1px solid #e0e7e1; border-radius: 9px; padding: 8px; background: #fafcfa; }
.triage-binding-summary strong { font-size: .66rem; }.triage-binding-summary small { overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.dual-channel-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 14px 0 4px; }
.dual-channel-summary > span { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 2px 8px; align-items: center; border: 1px solid #dfe7e1; border-radius: 11px; padding: 11px; background: #f9fbf8; }
.dual-channel-summary .material-icon { grid-row: 1 / 3; width: 22px; height: 22px; color: #4e8b2d; }.dual-channel-summary strong { font-size: .74rem; }.dual-channel-summary small { color: var(--muted); font-size: .62rem; }
.meta-window-modal { width: min(700px,100%); }
.meta-window-choice { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 16px 0; }
.meta-window-choice-card { display: grid; gap: 6px; min-height: 112px; border: 1px solid #dce4de; border-radius: 12px; padding: 15px; color: #2f3b34; background: #fafcf9; text-align: left; cursor: pointer; }
.meta-window-choice-card:hover, .meta-window-choice-card:focus-visible { border-color: #8ec43f; background: #f3f9e9; outline: none; }.meta-window-choice-card strong { font-size: .8rem; }.meta-window-choice-card span { color: var(--muted); font-size: .7rem; line-height: 1.45; }
.template-group-choice { gap: 14px; margin: 20px 0 4px; }
.template-group-card { display: grid; grid-template-columns: 54px minmax(0, 1fr) 22px; align-items: center; gap: 14px; min-height: 126px; padding: 19px; border-color: #d7e6d0; border-radius: 18px; background: linear-gradient(135deg, #fff 30%, #f2f9e8); box-shadow: 0 8px 22px rgba(47, 82, 35, .07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.template-group-card[data-template-group="commercial"] { border-color: #d5e7e5; background: linear-gradient(135deg, #fff 30%, #edf8f6); }
.template-group-card:hover, .template-group-card:focus-visible { transform: translateY(-3px); border-color: #83bb35; background: linear-gradient(135deg, #fff 20%, #eaf8d9); box-shadow: 0 14px 30px rgba(53, 91, 36, .14); }
.template-group-card[data-template-group="commercial"]:hover, .template-group-card[data-template-group="commercial"]:focus-visible { border-color: #46a79b; background: linear-gradient(135deg, #fff 20%, #e2f5f1); }
.template-group-card:focus-visible { outline: 3px solid #80be35; outline-offset: 3px; }
.template-group-card .template-group-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #4c811a; background: #e5f7cc; }
.template-group-card[data-template-group="commercial"] .template-group-icon { color: #147b73; background: #ddf3ef; }
.template-group-card .template-group-icon .material-icon { width: 28px; height: 28px; }
.template-group-card .template-group-copy { display: grid; gap: 7px; min-width: 0; color: #26362a; }
.template-group-card .template-group-copy strong { font-size: .96rem; line-height: 1.2; }
.template-group-card .template-group-copy small { color: #607168; font-size: .72rem; line-height: 1.45; }
.template-group-card .template-group-arrow { display: grid; place-items: center; color: #659a31; transition: transform .18s ease; }
.template-group-card[data-template-group="commercial"] .template-group-arrow { color: #368d83; }
.template-group-card .template-group-arrow .material-icon { width: 22px; height: 22px; }
.template-group-card:hover .template-group-arrow, .template-group-card:focus-visible .template-group-arrow { transform: translateX(4px); }
@media (max-width: 700px) { .template-group-choice { grid-template-columns: 1fr; }.template-group-card { min-height: 98px; } }
.broadcast-modal { width: min(880px,100%); }
.broadcast-review-modal { width: min(1120px,100%); }
.broadcast-detail-modal { width: min(980px,100%); }
.broadcast-detail-media { display: block; width: fit-content; margin: 12px 0; }
.broadcast-detail-media img { display: block; width: min(320px,100%); max-height: 260px; border-radius: 10px; object-fit: cover; }
.broadcast-detail-attachment { display: flex; gap: 8px; align-items: center; width: fit-content; margin: 12px 0; border: 1px solid #dce5dd; border-radius: 10px; padding: 10px 12px; color: #356448; background: #f7faf7; font-size: .72rem; font-weight: 800; text-decoration: none; }
.broadcast-detail-section { margin-top: 18px; }
.broadcast-detail-section h3 { margin: 0 0 8px; color: #2c3a32; font-size: .82rem; }
.broadcast-detail-variations { max-height: 360px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; overflow-y: auto; }
.broadcast-detail-variations article { border: 1px solid #e0e7e1; border-radius: 10px; padding: 10px; background: #fafcf9; }
.broadcast-detail-variations small { color: #568126; font-size: .62rem; font-weight: 850; }
.broadcast-detail-variations p { margin: 5px 0 0; color: #48564e; font-size: .72rem; line-height: 1.5; white-space: pre-wrap; }
.broadcast-detail-recipients { max-height: 220px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; overflow-y: auto; }
.broadcast-detail-recipients > span { display: grid; gap: 2px; border-bottom: 1px solid #e7ece8; padding: 7px 4px; }
.broadcast-detail-recipients strong { font-size: .7rem; }.broadcast-detail-recipients small { color: var(--muted); font-size: .62rem; }
.broadcast-variable-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: 14px 0; }
.variable-chip { display: grid; gap: 3px; border: 1px solid #dce5dd; border-radius: 9px; padding: 8px; color: #3f654c; background: #f8fbf6; text-align: left; }.variable-chip:hover { border-color:#91c04b;background:#f1f8e7 }.variable-chip code { font-size:.69rem;font-weight:800 }.variable-chip span { color:var(--muted);font-size:.58rem }
.message-variable-list { margin-top: 10px; margin-bottom: 12px; }
.conversation-read-only-notice { display: flex; gap: 9px; align-items: center; border-top: 1px solid #d9e3dc; padding: 9px 16px; color: #53645a; background: #f5f8f4; }
.conversation-read-only-notice .material-icon { width: 20px; height: 20px; color: #537530; }
.conversation-read-only-notice strong, .conversation-read-only-notice small { display: block; }
.conversation-read-only-notice strong { font-size: .7rem; }
.conversation-read-only-notice small { margin-top: 2px; color: #76827b; font-size: .62rem; }
.read-only-composer { opacity: .52; pointer-events: none; }
.conversation-log-readonly { margin: 12px 0 0; border-top: 1px solid #e1e7e2; padding-top: 10px; }
.team-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.team-actions .button { margin: 0; white-space: nowrap; }
.custom-permission-summary { color: #75348e !important; background: #f4eafa; }
.operator-permissions-form { width: min(720px,100%); }
.operator-permission-list { display: grid; gap: 8px; margin: 14px 0; }
.operator-permission-list label { position: relative; display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: start; margin: 0; border: 1px solid #dce5de; border-radius: 11px; padding: 11px 12px; background: #fbfcfa; cursor: pointer; }
.operator-permission-list label:has(input:checked) { border-color: #8ac72d; background: #f1fae5; box-shadow: inset 3px 0 #83c526; }
.operator-permission-list input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #72b917; }
.operator-permission-list strong, .operator-permission-list small { display: block; }
.operator-permission-list strong { color: #344139; font-size: .78rem; }
.operator-permission-list small { margin-top: 3px; color: #6d7971; font-size: .66rem; line-height: 1.4; }
.custom-permission-note { margin: 0; }
.custom-permission-note > strong { display: grid; place-items: center; }
.custom-permission-note .material-icon { width: 20px; height: 20px; }
.broadcast-ai-note, .broadcast-shared-attachment { display: flex; gap: 10px; align-items: center; margin: 13px 0; border: 1px solid #d6e8b6; border-radius: 11px; padding: 11px; color: #45651c; background: #f3fae8; }.broadcast-ai-note .material-icon, .broadcast-shared-attachment .material-icon { width:23px;height:23px }.broadcast-ai-note strong, .broadcast-ai-note small, .broadcast-shared-attachment strong, .broadcast-shared-attachment small { display:block }.broadcast-ai-note small, .broadcast-shared-attachment small { margin-top:2px;font-size:.65rem;color:#68775d }
.broadcast-review-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.broadcast-review-grid label { display:grid;gap:5px }.broadcast-review-grid label > span { color:#517228;font-size:.68rem;font-weight:850 }.broadcast-review-grid textarea { min-height:130px;margin:0;font-size:.75rem;line-height:1.45 }
.button-spinner { width: 17px; height: 17px; display: inline-block; border: 2px solid rgba(255,255,255,.45); border-top-color: currentColor; border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.broadcast-monitor { position: fixed; z-index: 110; left: 18px; top: 18px; width: min(370px,calc(100vw - 36px)); display: grid; grid-template-columns: 42px minmax(0,1fr) 34px; gap: 10px; align-items: center; border: 1px solid #cfe1d3; border-radius: 15px; padding: 11px; color: #29362f; background: rgba(255,255,255,.97); box-shadow: 0 16px 48px rgba(21,48,34,.2); backdrop-filter: blur(8px); }
.broadcast-monitor-icon { width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:white;background:#27845f }.broadcast-monitor-icon .material-icon{width:21px;height:21px}.broadcast-monitor > div:nth-child(2){display:grid;gap:2px}.broadcast-monitor small{color:#247353;font-size:.59rem;font-weight:850;text-transform:uppercase}.broadcast-monitor strong{overflow:hidden;text-overflow:ellipsis;font-size:.76rem;white-space:nowrap}.broadcast-monitor span,.broadcast-monitor em{color:var(--muted);font-size:.64rem;font-style:normal}.broadcast-monitor progress{width:100%;height:5px;accent-color:#79bd22}
.cooldown-backdrop { position:fixed;z-index:1500;inset:0;display:grid;place-items:center;padding:18px;background:rgba(11,18,14,.76);backdrop-filter:blur(7px) }
.cooldown-modal { width:min(760px,100%);display:grid;grid-template-columns:minmax(240px,.9fr) minmax(300px,1.1fr);overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:22px;color:white;background:#26352d;box-shadow:0 30px 100px rgba(0,0,0,.45) }.cooldown-modal img{width:100%;height:100%;min-height:360px;object-fit:cover}.cooldown-modal > div{display:flex;flex-direction:column;justify-content:center;padding:34px}.cooldown-modal h2{margin:8px 0 10px;font-size:1.8rem}.cooldown-modal p{margin:0;color:#d9e5dc;line-height:1.55}.cooldown-modal strong{margin:22px 0 4px;color:#9cff2d;font-size:2.6rem}.cooldown-modal small{color:#afc0b5}

@media (max-width: 1000px) { .broadcast-layout { grid-template-columns:1fr }.contact-item{grid-template-columns:minmax(210px,1fr) auto}.contact-notes{grid-column:1}.contact-flag-button{grid-column:2;grid-row:2}.contact-actions{grid-column:2;grid-row:1} }
@media (max-width: 700px) { .contact-filter-panel,.broadcast-variable-list,.broadcast-review-grid{grid-template-columns:1fr}.broadcast-contact-toolbar{grid-template-columns:1fr}.broadcast-contact-toolbar .button{justify-self:start}.contacts-toolbar{grid-template-columns:1fr auto}.contacts-toolbar .status-badge{grid-column:1/-1}.broadcast-page,.operator-inbox-mode .broadcast-page{padding:14px}.broadcast-selection-card,.broadcast-history-card{padding:12px}.cooldown-modal{grid-template-columns:1fr}.cooldown-modal img{height:220px;min-height:0}.cooldown-modal>div{padding:24px}.broadcast-monitor{top:auto;bottom:14px}.notification-sound-setting,.internal-profile-photo-setting{grid-template-columns:1fr}.notification-sound-controls{grid-template-columns:minmax(0,1fr) auto}.notification-sound-controls select{min-width:0}.contact-item{grid-template-columns:1fr}.contact-notes,.contact-flag-button,.contact-actions{grid-column:auto;grid-row:auto;justify-self:start}.contacts-pagination{flex-wrap:wrap;justify-content:flex-start}.repeated-message-education{grid-template-columns:1fr;text-align:center}.repeated-message-education img{width:150px;height:150px;margin:auto}.repeated-message-education .button{width:100%} }
@media (max-width: 700px) { .broadcast-detail-variations,.broadcast-detail-recipients{grid-template-columns:1fr} }
@media (max-width: 700px) { .dual-channel-summary,.meta-window-choice,.triage-binding-summary{grid-template-columns:1fr}.triage-window-badge{padding:4px 7px;font-size:.58rem} }
@media (max-width: 700px) { .team-actions { grid-column: 2 / -1; flex-wrap: wrap; justify-content: flex-start; }.internal-variable-menu > div { grid-template-columns:1fr; } }

/* Outbound history stays separate from contact notes and action buttons. */
.contact-item { grid-template-columns: minmax(170px, 1fr) minmax(190px, 1.35fr) minmax(130px, .8fr) minmax(85px, auto) auto; }
.contact-last-sent { display: grid; gap: 3px; min-width: 0; align-content: center; text-align: left; }
.contact-last-sent .contact-last-sent-label { margin: 0; color: #627568; font-size: .59rem; font-weight: 750; }
.contact-last-sent .contact-last-sent-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; white-space: normal; color: #263d30; font-size: .73rem; line-height: 1.35; font-weight: 500; }
.contact-last-sent .contact-last-sent-text.is-empty { color: #839087; }
.contact-last-sent time { color: #738078; font-size: .62rem; line-height: 1.3; }
.broadcast-contact-choice { grid-template-columns: 20px 40px minmax(140px, 1fr) minmax(170px, 1.25fr) auto; }
.broadcast-contact-filter-panel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.broadcast-contact-filter-panel select { min-width: 0; }
@media (max-width: 1180px) and (min-width: 701px) {
  .contact-item { grid-template-columns: minmax(170px, 1fr) minmax(190px, 1.2fr) minmax(170px, auto); }
  .contact-item .contact-profile { grid-column: 1; grid-row: 1; }
  .contact-item .contact-last-sent { grid-column: 2; grid-row: 1 / 3; }
  .contact-item .contact-notes { grid-column: 1; grid-row: 2; }
  .contact-item .contact-flag-button { grid-column: 3; grid-row: 1; justify-self: end; }
  .contact-item .contact-actions { grid-column: 3; grid-row: 2; max-width: 250px; flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 700px) {
  .contact-item { grid-template-columns: minmax(0, 1fr); }
  .contact-item .contact-profile, .contact-item .contact-last-sent, .contact-item .contact-notes, .contact-item .contact-flag-button, .contact-item .contact-actions { grid-column: 1; grid-row: auto; }
  .contact-item .contact-actions { max-width: 100%; flex-wrap: wrap; }
  .broadcast-contact-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .broadcast-contact-choice { grid-template-columns: 18px 36px minmax(0, 1fr) auto; }
  .broadcast-contact-choice .contact-avatar { width: 36px; height: 36px; }
  .broadcast-contact-choice .contact-last-sent { grid-column: 3; grid-row: 2; }
  .broadcast-contact-choice .broadcast-contact-markers { grid-column: 4; grid-row: 1; }
}

/* Mobile portrait shell: isolated from the current desktop and landscape UI. */
@media (max-width: 820px) and (orientation: portrait) {
  html, body.operator-inbox-mode { width: 100%; height: 100%; min-height: 100%; overflow: hidden; overscroll-behavior: none; }
  .operator-inbox-mode .app-shell, .operator-inbox-mode .main-content, .operator-inbox { height: 100dvh; min-height: 100dvh; }
  .operator-inbox { border-top: 0; background: #f7f8f4; }
  .operator-list-pane { width: 100%; height: 100dvh; padding-top: env(safe-area-inset-top); border-right: 0; }
  .operator-brand { min-height: 64px; padding: 9px 12px; }
  .operator-brand .brand-favicon { width: 40px; height: 40px; }
  .operator-brand .brand-name { font-size: 1.05rem; }
  .operator-brand small { font-size: .64rem; }
  .collapse-list, .expand-list { display: none !important; }
  .operator-list-tools { gap: 8px; padding: 10px 10px 8px; }
  .operator-list-tools .search-box input { height: 44px; border-radius: 14px; font-size: .88rem; }
  .department-filter { grid-template-columns: auto minmax(0, 1fr); }
  .department-filter select { height: 40px; font-size: .79rem; }
  .operator-list-title { min-height: 39px; }
  .operator-list-title .button-group { gap: 5px; }
  .operator-list-title .button { min-height: 36px; padding: 7px 10px; }
  .operator-list-pane .conversation-list { padding-bottom: calc(14px + env(safe-area-inset-bottom)); scrollbar-gutter: auto; }
  .operator-conversation-item { min-height: 76px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 9px; padding: 9px 11px; }
  .operator-conversation-item .contact-avatar { width: 42px; height: 42px; }
  .operator-conversation-item .conversation-copy strong { font-size: .86rem; }
  .operator-conversation-item .conversation-copy > span { max-width: none; font-size: .73rem; }
  .operator-conversation-item .conversation-copy small { font-size: .6rem; }

  .operator-chat-pane { inset: 0; width: 100%; height: 100dvh; max-height: 100dvh; padding-top: env(safe-area-inset-top); background: #f4f5f0; }
  .operator-chat-header { min-height: 0; max-height: none; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; overflow: visible; padding: 8px 9px; box-shadow: 0 1px 8px rgba(31, 54, 42, .08); }
  .operator-chat-header .mobile-back { order: 1; width: 36px; min-width: 36px; height: 36px; flex: 0 0 36px; }
  .operator-chat-header > .contact-avatar { order: 2; width: 36px; height: 36px; flex: 0 0 36px; }
  .operator-chat-header .chat-contact-button { order: 3; flex: 1 1 calc(100% - 90px); max-width: none; min-height: 36px; }
  .operator-chat-header .chat-contact-button strong { font-size: .86rem; }
  .operator-chat-header .chat-contact-button span { max-width: none; margin-top: 2px; font-size: .62rem; }
  .operator-chat-header .triage-window-badge { order: 10; min-width: 0; flex: 1 1 calc(100% - 126px); justify-content: center; overflow: hidden; padding: 7px 9px; text-overflow: ellipsis; white-space: nowrap; }
  .operator-chat-header #conversationNoteButton, .operator-chat-header #conversationLogButton, .operator-chat-header .message-order-toggle { order: 11; width: 36px; min-width: 36px; height: 34px; flex: 0 0 36px; }
  .operator-chat-header #transferButton, .operator-chat-header #returnDepartmentButton, .operator-chat-header #resolveButton { order: 20; min-height: 34px; flex: 1 1 88px; padding: 7px 9px; }
  .operator-chat-header .status-badge.private { order: 20; display: inline-flex; min-height: 34px; flex: 1 1 180px; justify-content: center; }
  .operator-chat-header .chat-more-wrap { order: 21; width: 36px; flex: 0 0 36px; }
  .operator-chat-header #chatMore { width: 36px; height: 34px; border: 1px solid #d9e1da; background: #fff; }
  .operator-chat-header .chat-action-menu { top: 39px; right: 0; }
  .operator-messages { min-height: 0; flex: 1 1 auto; padding: 14px 9px; scrollbar-gutter: auto; }
  .operator-messages .message-row { margin: 8px 0; }
  .operator-messages .message-bubble { max-width: 91%; padding: 9px 34px 7px 11px; font-size: .9rem; line-height: 1.42; }
  .operator-messages .message-media-image img { max-width: min(300px, 100%); max-height: 44dvh; }
  .chat-context-strip { max-height: 34dvh; padding: 7px 9px; }
  .transfer-panel, .transfer-panel.without-assignee { max-height: 46dvh; overflow-y: auto; gap: 7px; padding: 9px; }

  .operator-composer { grid-template-columns: repeat(5, 36px) minmax(0, 1fr) 44px; grid-template-rows: auto 36px; gap: 5px 4px; align-items: center; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 12px rgba(31, 54, 42, .08); }
  .operator-composer .customer-composer-field { grid-column: 1 / 7; grid-row: 1; margin-left: 0; }
  .operator-composer .customer-composer-field textarea { min-width: 0; min-height: 46px; max-height: 38dvh; padding: 11px 14px; font-size: 16px; }
  .operator-composer .send-button { grid-column: 7; grid-row: 1; width: 42px; min-width: 42px; height: 42px; justify-self: end; }
  .operator-composer > #sendConversationTemplate { grid-column: 1; grid-row: 2; }
  .operator-composer > .quick-reply-wrap { grid-column: 2; grid-row: 2; }
  .operator-composer > #emojiButton { grid-column: 3; grid-row: 2; }
  .operator-composer > .attach-button { grid-column: 4; grid-row: 2; }
  .operator-composer > #messageVoice { grid-column: 5; grid-row: 2; }
  .operator-composer .composer-tool { width: 36px; height: 36px; border-radius: 10px; }
  .operator-composer .quick-reply-menu { width: min(320px, calc(100vw - 16px)); max-height: 58dvh; bottom: 43px; }
  .composer-media-preview, .conversation-read-only-notice, .composer-reply-slot { padding-left: 9px; padding-right: 9px; }

  .department-chat-drawer { position: fixed; inset: 0; width: 100vw !important; height: 100dvh; max-height: 100dvh; border-left: 0; }
  .department-chat-drawer:not(.open) .department-chat-tab { left: -58px; top: auto; bottom: calc(108px + env(safe-area-inset-bottom)); width: 48px; min-height: 48px; border: 1px solid #cad9ce; border-radius: 50%; box-shadow: 0 8px 24px rgba(25,49,37,.18); }
  .operator-chat-pane.mobile-hidden + .department-chat-drawer:not(.open) .department-chat-tab { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .department-chat-drawer:not(.open) .department-chat-tab span, .department-chat-drawer.open .department-chat-tab { display: none; }
  .department-chat-drawer:not(.open) .department-chat-tab b { transform: none; }
  .department-chat-content { padding: calc(10px + env(safe-area-inset-top)) 9px calc(8px + env(safe-area-inset-bottom)); }
  .department-chat-composer { grid-template-columns: repeat(4, 36px) minmax(0, 1fr) 42px; grid-template-rows: auto 36px; gap: 5px 4px; }
  .department-chat-composer .internal-composer-field { grid-column: 1 / 6; grid-row: 1; }
  .department-chat-composer .department-chat-send { grid-column: 6; grid-row: 1; width: 40px; min-width: 40px; height: 40px; justify-self: end; }
  .department-chat-composer > #departmentChatVariables { grid-column: 1; grid-row: 2; }
  .department-chat-composer > #departmentChatEmoji { grid-column: 2; grid-row: 2; }
  .department-chat-composer > .attach-button { grid-column: 3; grid-row: 2; }
  .department-chat-composer > #departmentChatVoice { grid-column: 4; grid-row: 2; }
  .department-chat-composer .composer-tool { width: 36px; height: 36px; }
  .department-chat-composer textarea { min-height: 46px; max-height: 38dvh; font-size: 16px; }

  .modal-backdrop { align-items: stretch; padding: 0; }
  .contact-modal { width: 100%; max-width: none; max-height: 100dvh; min-height: 100dvh; margin: 0; border-radius: 0; padding: calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)); }
  .conversation-context-menu { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .toast { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); left: 10px; max-width: none; }
}