:root {
  --p-bg: #eef3f9;
  --p-surface: #ffffff;
  --p-line: #dce6f1;
  --p-ink: #0b1728;
  --p-muted: #6f8298;
  --p-blue: #1d4ed8;
  --p-blue-deep: #0f2f6b;
  --p-navy: #09192d;
  --p-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--p-bg);
  color: var(--p-ink);
  font-family: var(--p-font);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font-family: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Login */
.portal-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(380px, .82fr);
  background: #eef3f9;
}
.portal-login-visual {
  position: relative;
  overflow: hidden;
  padding: 44px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 92% 8%, rgba(59, 130, 246, .25), transparent 27%),
    radial-gradient(circle at 8% 94%, rgba(37, 99, 235, .18), transparent 30%),
    linear-gradient(145deg, #071528 0%, #0d2340 56%, #12345d 100%);
  color: #fff;
}
.portal-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; }
.portal-brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 12px; background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  color: #fff; font-size: 18px; font-weight: 700; box-shadow: 0 8px 18px rgba(29, 78, 216, .34);
}
.portal-brand strong { display: block; font-size: 14px; letter-spacing: .03em; }
.portal-brand small { display: block; margin-top: 2px; color: #8fa9c6; font-size: 7px; letter-spacing: .1em; }
.portal-login-copy { position: relative; z-index: 2; max-width: 560px; margin: 50px 0; }
.portal-eyebrow { display: block; color: #8fb5e3; font-size: 8px; letter-spacing: .17em; text-transform: uppercase; }
.portal-login-copy h1 { margin: 15px 0 16px; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.18; letter-spacing: -.04em; font-weight: 650; }
.portal-login-copy h1 em { font-style: normal; color: #8ec5ff; }
.portal-login-copy p { margin: 0; max-width: 480px; color: #a9bdd3; font-size: 12px; line-height: 1.9; }
.portal-login-points { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.portal-login-points span {
  padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(147, 197, 253, .2);
  background: rgba(255, 255, 255, .06); color: #c9def5; font-size: 8px;
}
.portal-login-orbit { position: absolute; border: 1px solid rgba(147, 197, 253, .13); border-radius: 50%; pointer-events: none; }
.orbit-a { width: 520px; height: 520px; right: -180px; top: -160px; }
.orbit-b { width: 730px; height: 730px; right: -280px; top: -250px; border-color: rgba(147, 197, 253, .08); }
.portal-login-panel { display: flex; flex-direction: column; justify-content: center; padding: 38px clamp(28px, 5vw, 76px); background: #f5f8fc; }
.portal-login-form { width: 100%; max-width: 380px; margin: 0 auto; }
.portal-login-form h2 { margin: 9px 0 7px; font-size: 26px; letter-spacing: -.03em; font-weight: 650; }
.portal-login-form > p { margin: 0 0 25px; color: #71859c; font-size: 10.5px; line-height: 1.7; }
.portal-login-form label { display: block; margin-bottom: 7px; color: #344b64; font-size: 9px; font-weight: 600; }
.portal-login-form input {
  width: 100%; height: 45px; padding: 0 13px; border: 1px solid #d5e2f0; border-radius: 9px;
  background: #fff; color: #12253b; font-size: 12px; outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.portal-login-form input:focus { border-color: #7fa9e4; background: #fff; box-shadow: 0 0 0 4px rgba(37, 99, 235, .1); }
.portal-login-error { min-height: 18px; padding-top: 6px; color: #be123c; font-size: 8.5px; }
.portal-login-form button {
  width: 100%; height: 44px; border: 0; border-radius: 9px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff;
  font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 8px 18px rgba(29, 78, 216, .22); transition: transform .18s, box-shadow .18s;
}
.portal-login-form button:hover { transform: translateY(-1px); box-shadow: 0 11px 24px rgba(29, 78, 216, .3); }
.portal-login-form button:disabled { opacity: .65; cursor: wait; }
.portal-login-help { margin-top: 24px; padding-top: 16px; border-top: 1px solid #e0e9f3; }
.portal-login-help strong { display: block; margin-bottom: 4px; font-size: 8.5px; color: #2c435b; }
.portal-login-help span { color: #8193a8; font-size: 8.5px; line-height: 1.7; }
.portal-login-foot { width: 100%; max-width: 380px; margin: 34px auto 0; color: #9aaabc; font-size: 7.5px; text-align: center; }

/* App shell */
.portal-app { min-height: 100vh; display: grid; grid-template-columns: 272px minmax(0, 1fr); }
.portal-sidebar {
  position: sticky; top: 0; height: 100vh; padding: 22px 15px 18px;
  display: flex; flex-direction: column; gap: 18px; overflow-y: auto;
  background:
    radial-gradient(circle at 0% 0%, rgba(37, 99, 235, .2), transparent 32%),
    linear-gradient(180deg, #0a1b31 0%, #071426 100%);
  color: #dbe8f7;
}
.portal-brand-dark { padding: 0 7px; }
.portal-brand-dark .portal-brand-mark { width: 35px; height: 35px; border-radius: 10px; font-size: 15px; }
.portal-brand-dark strong { font-size: 12px; }
.portal-brand-dark small { color: #7895b5; }
.portal-company-card {
  padding: 12px; border: 1px solid rgba(147, 197, 253, .15); border-radius: 11px;
  background: rgba(255, 255, 255, .045);
}
.portal-company-label { display: block; color: #6f8faf; font-size: 7px; letter-spacing: .08em; }
.portal-company-card strong { display: block; margin-top: 5px; color: #fff; font-size: 11px; line-height: 1.5; }
.portal-company-card > span:last-child { display: block; margin-top: 4px; color: #8eabc9; font-size: 8px; }
.portal-nav { display: flex; flex-direction: column; gap: 4px; }
.portal-nav button {
  position: relative; width: 100%; height: 38px; padding: 0 11px;
  display: flex; align-items: center; gap: 9px; border: 0; border-radius: 9px;
  background: transparent; color: #9fb5cb; text-align: left; font-size: 9.5px;
  transition: background .16s, color .16s;
}
.portal-nav button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.portal-nav button.active { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; box-shadow: 0 6px 15px rgba(29, 78, 216, .24); }
.portal-nav i { width: 16px; height: 16px; display: grid; place-items: center; }
.portal-nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-nav-dot { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #f59e0b; display: none; }
.portal-nav-dot.on { display: block; }
.portal-sidebar-owner { margin-top: auto; padding: 11px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(147, 197, 253, .14); border-radius: 10px; background: rgba(255, 255, 255, .04); }
.portal-owner-avatar { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(145deg, #3b82f6, #1d4ed8); color: #fff; font-size: 11px; font-weight: 600; }
.portal-sidebar-owner small { display: block; color: #6f8faf; font-size: 7px; }
.portal-sidebar-owner strong { display: block; margin-top: 1px; color: #fff; font-size: 9px; }
.portal-sidebar-owner span:last-child { display: block; margin-top: 1px; color: #82a1c1; font-size: 7px; }
.portal-logout { height: 32px; border: 1px solid rgba(147, 197, 253, .16); border-radius: 8px; background: transparent; color: #9db6d2; font-size: 8.5px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.portal-logout:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.portal-logout svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.portal-main { min-width: 0; background: #eef3f9; }
.portal-topbar { padding: 27px 34px 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.portal-topbar h1 { margin: 5px 0 0; font-size: 25px; line-height: 1.25; letter-spacing: -.035em; }
.portal-topbar-right { display: flex; align-items: center; gap: 12px; }
.portal-live { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #d4e3f3; border-radius: 6px; background: #fff; color: #2a5f9c; font-size: 8px; }
.portal-live i { width: 5px; height: 5px; border-radius: 50%; background: #2563eb; }
.portal-today { color: #8a9bae; font-size: 8px; }
.portal-content { padding: 0 34px 38px; }
.portal-section { animation: portalFade .26s ease; }
@keyframes portalFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.portal-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 14px; }
.portal-kpi { position: relative; overflow: hidden; min-width: 0; padding: 15px 16px; border-radius: 13px; color: #fff; box-shadow: 0 7px 18px rgba(15, 23, 42, .1); }
.portal-kpi.blue { background: linear-gradient(135deg, #1e40af, #2563eb); }
.portal-kpi.navy { background: linear-gradient(135deg, #26364a, #3b4f68); }
.portal-kpi.indigo { background: linear-gradient(135deg, #3730a3, #4f46e5); }
.portal-kpi.amber { background: linear-gradient(135deg, #92400e, #c2740b); }
.portal-kpi-label { display: flex; align-items: center; justify-content: space-between; color: rgba(255, 255, 255, .72); font-size: 8px; }
.portal-kpi-label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.portal-kpi-value { margin-top: 10px; font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.portal-kpi-value small { margin-left: 3px; font-size: 8px; font-weight: 400; color: rgba(255, 255, 255, .66); }
.portal-kpi-note { margin-top: 7px; color: rgba(255, 255, 255, .6); font-size: 7.5px; }
.portal-two-col { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 14px; }
.portal-card { min-width: 0; border: 1px solid #e1eaf4; border-radius: 13px; background: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, .035); }
.portal-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 17px 10px; }
.portal-card-kicker { color: #8a9caf; font-size: 6.5px; letter-spacing: .1em; text-transform: uppercase; }
.portal-card-title { margin-top: 4px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }
.portal-card-title svg { width: 14px; height: 14px; fill: none; stroke: #1d4ed8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-card-sub { margin-top: 3px; color: #8193a7; font-size: 8px; }
.portal-card-body { padding: 0 17px 15px; }
.portal-link { display: inline-flex; align-items: center; gap: 3px; color: #1d4ed8; font-size: 8px; text-decoration: none; white-space: nowrap; }
.portal-link svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; }
.portal-progress { height: 5px; overflow: hidden; border-radius: 8px; background: #e7eff9; }
.portal-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b82f6, #1d4ed8); }
.portal-rows { display: flex; flex-direction: column; }
.portal-row { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid #edf2f8; }
.portal-row:last-child { border-bottom: 0; }
.portal-row-main { flex: 1; min-width: 0; }
.portal-row-title { color: #152b42; font-size: 9px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-row-meta { margin-top: 3px; color: #8798ab; font-size: 7.5px; }
.portal-row-amount { color: #162e48; font-family: var(--p-font); font-size: 9px; font-weight: 600; white-space: nowrap; }
.portal-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: 4px; font-size: 7px; white-space: nowrap; }
.portal-badge.pending { background: #fff4dc; color: #9a5c00; }
.portal-badge.approved { background: #e9f1ff; color: #1d4ed8; }
.portal-badge.rejected { background: #ffe8ee; color: #be123c; }
.portal-badge.done { background: #e9f1ff; color: #1d4ed8; }
.portal-badge.doing { background: #e9f5ff; color: #0369a1; }
.portal-badge.todo { background: #eef2f7; color: #52677f; }
.portal-empty { padding: 26px 10px; color: #93a5b8; font-size: 8.5px; text-align: center; }
.portal-empty svg { width: 22px; height: 22px; margin: 0 auto 7px; fill: none; stroke: #a9bacd; stroke-width: 1.6; }
.portal-timeline { display: flex; flex-direction: column; }
.portal-timeline-item { position: relative; padding: 0 0 12px 15px; border-left: 1px solid #e1eaf4; }
.portal-timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.portal-timeline-dot { position: absolute; left: -4px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: #c5d4e5; box-shadow: 0 0 0 2px #fff; }
.portal-timeline-item.approved .portal-timeline-dot { background: #1d4ed8; }
.portal-timeline-item.rejected .portal-timeline-dot { background: #be123c; }
.portal-timeline-item.current .portal-timeline-dot { background: #f59e0b; }
.portal-timeline-title { color: #1c334b; font-size: 8.5px; font-weight: 500; }
.portal-timeline-date { margin-top: 2px; color: #91a2b5; font-size: 7px; }

/* Finance */
.portal-finance-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.portal-finance-tile { padding: 13px 14px; border: 1px solid #e1eaf4; border-radius: 10px; background: #fff; }
.portal-finance-tile span { display: block; color: #8295aa; font-size: 8px; }
.portal-finance-tile strong { display: block; margin-top: 6px; color: #11283f; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.portal-finance-tile small { display: block; margin-top: 4px; color: #9aabbc; font-size: 7px; }
.portal-table { width: 100%; border-collapse: collapse; }
.portal-table th { padding: 7px 8px; border-bottom: 1px solid #e7eff7; color: #8a9caf; font-size: 7px; font-weight: 500; text-align: left; white-space: nowrap; }
.portal-table td { padding: 10px 8px; border-bottom: 1px solid #eef3f8; color: #1a3048; font-size: 8.5px; vertical-align: middle; }
.portal-table tr:last-child td { border-bottom: 0; }
.portal-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.portal-table .muted { color: #8b9daf; font-size: 7.5px; }

/* Products */
.portal-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.portal-product { position: relative; overflow: hidden; padding: 17px; border: 1px solid #e1eaf4; border-radius: 13px; background: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, .035); }
.portal-product::after { content: ""; position: absolute; right: -28px; top: -28px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .1), transparent 68%); }
.portal-product-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #eaf2fe; color: #1d4ed8; }
.portal-product-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.portal-product-tag { display: inline-block; margin-top: 12px; padding: 2px 6px; border-radius: 3px; background: #eef4fb; color: #3a6ba8; font-size: 6.5px; }
.portal-product h3 { margin: 8px 0 5px; font-size: 12px; letter-spacing: -.01em; }
.portal-product p { min-height: 38px; margin: 0; color: #75899e; font-size: 8px; line-height: 1.7; }
.portal-product-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; padding-top: 10px; border-top: 1px solid #eef3f8; }
.portal-product-price { color: #1c3a5d; font-size: 8px; font-weight: 600; }
.portal-product-ask { border: 1px solid #cbdcf0; border-radius: 5px; background: #fff; color: #1d4ed8; font-size: 7px; padding: 4px 7px; }
.portal-product-ask:hover { background: #eef5ff; }

/* Chat */
.portal-chat { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; }
.portal-chat-panel { display: flex; flex-direction: column; min-height: 480px; border: 1px solid #e1eaf4; border-radius: 13px; background: #fff; overflow: hidden; }
.portal-chat-head { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid #e7eff7; background: #f8fbff; }
.portal-chat-head .portal-owner-avatar { width: 32px; height: 32px; border-radius: 9px; }
.portal-chat-head strong { display: block; font-size: 10px; }
.portal-chat-head span { display: block; margin-top: 2px; color: #8295a9; font-size: 7.5px; }
.portal-chat-online { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: #1d4ed8; font-size: 7px; }
.portal-chat-online i { width: 4px; height: 4px; border-radius: 50%; background: #2563eb; }
.portal-chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 17px; display: flex; flex-direction: column; gap: 9px; background: #fbfdff; }
.portal-message { max-width: 78%; display: flex; flex-direction: column; gap: 3px; }
.portal-message.staff { align-self: flex-start; }
.portal-message.client { align-self: flex-end; align-items: flex-end; }
.portal-message-meta { color: #91a2b5; font-size: 6.5px; }
.portal-message-bubble { padding: 8px 10px; border-radius: 9px; font-size: 9px; line-height: 1.7; white-space: pre-wrap; }
.portal-message.staff .portal-message-bubble { background: #eef4fb; color: #1c334b; border-bottom-left-radius: 3px; }
.portal-message.client .portal-message-bubble { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border-bottom-right-radius: 3px; }
.portal-chat-form { flex: 0 0 auto; display: flex; gap: 7px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid #e7eff7; background: #f8fbff; }
.portal-chat-form textarea { flex: 1; min-height: 35px; height: 35px; max-height: 90px; padding: 8px 10px; border: 1px solid #d8e5f2; border-radius: 8px; background: #fff; color: #172b42; resize: none; font-size: 9px; outline: none; }
.portal-chat-form textarea:focus { border-color: #88afe2; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }
.portal-chat-form button { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 8px; background: #1d4ed8; color: #fff; }
.portal-chat-form button:disabled { opacity: .5; cursor: wait; }
.portal-chat-form svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-chat-side { padding: 15px; border: 1px solid #e1eaf4; border-radius: 13px; background: #fff; }
.portal-chat-side h3 { margin: 0 0 9px; font-size: 11px; }
.portal-chat-side p { margin: 0; color: #7b8fa5; font-size: 8px; line-height: 1.8; }
.portal-chat-contact { margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf2f8; }
.portal-chat-contact span { display: block; color: #94a5b7; font-size: 7px; }
.portal-chat-contact strong { display: block; margin-top: 3px; color: #203850; font-size: 9px; }

.portal-toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; max-width: 300px; padding: 10px 13px; border-radius: 8px; background: #0c2139; color: #fff; font-size: 8.5px; box-shadow: 0 8px 22px rgba(15, 23, 42, .2); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.portal-toast.show { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .portal-login { grid-template-columns: 1fr; }
  .portal-login-visual { min-height: 350px; padding: 30px; }
  .portal-login-copy { margin: 28px 0 24px; }
  .portal-login-panel { padding: 36px 24px; }
  .portal-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .portal-app { grid-template-columns: 1fr; }
  .portal-sidebar { position: relative; height: auto; padding: 14px; display: block; }
  .portal-nav { display: grid; grid-template-columns: repeat(3, 1fr); margin: 13px 0; }
  .portal-company-card { margin-top: 12px; }
  .portal-sidebar-owner, .portal-logout { display: none; }
  .portal-topbar { padding: 20px 18px 14px; }
  .portal-content { padding: 0 18px 26px; }
  .portal-grid-4, .portal-products { grid-template-columns: 1fr; }
  .portal-chat { grid-template-columns: 1fr; }
  .portal-chat-side { display: none; }
  .portal-finance-summary { grid-template-columns: 1fr; }
  .portal-table { font-size: 8px; }
}


/* Installable client */
.portal-install {
  height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid #c9dbf0;
  border-radius: 6px;
  background: #fff;
  color: #1d4ed8;
  font-size: 7.5px;
  font-weight: 500;
  transition: background .16s, border-color .16s;
}
.portal-install:hover { background: #edf5ff; border-color: #9fc0e5; }
.portal-install span { display: grid; place-items: center; }
.portal-install svg { width: 11px; height: 11px; }

.portal-password-label { margin-top: 12px; }

/* ERP-style two-pane customer messaging */
.portal-chat { grid-template-columns: 252px minmax(0, 1fr); gap: 0; border: 1px solid #dfe9f4; border-radius: 13px; overflow: hidden; background: #fff; }
.portal-chat-rail { display: flex; flex-direction: column; min-width: 0; background: #f1f5fa; border-right: 1px solid #dfe8f2; }
.portal-chat-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 10px; }
.portal-chat-rail-head > div span { display: block; color: #8a9db1; font-size: 6.5px; letter-spacing: .1em; }
.portal-chat-rail-head > div strong { display: block; margin-top: 2px; color: #172d45; font-size: 12px; }
.portal-chat-rail-search { position: relative; margin: 0 11px 9px; }
.portal-chat-rail-search svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; color: #8ca0b5; }
.portal-chat-rail-search input { width: 100%; height: 29px; padding: 0 9px 0 25px; border: 1px solid #d9e5f1; border-radius: 7px; background: #fff; color: #1a3149; font-size: 8px; outline: none; }
.portal-chat-rail-search input:focus { border-color: #8db6e5; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }
.portal-chat-contacts { padding: 0 8px; display: flex; flex-direction: column; gap: 3px; }
.portal-chat-contact { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; color: #233a53; }
.portal-chat-contact:hover { background: rgba(255, 255, 255, .7); }
.portal-chat-contact.active { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; box-shadow: 0 5px 12px rgba(29, 78, 216, .2); }
.portal-chat-contact .portal-owner-avatar { width: 31px; height: 31px; border-radius: 9px; font-size: 10px; }
.portal-chat-contact-main { min-width: 0; flex: 1; }
.portal-chat-contact-main strong { display: flex; align-items: center; gap: 4px; color: #1a3149; font-size: 9px; }
.portal-chat-contact.active .portal-chat-contact-main strong { color: #fff; }
.portal-chat-contact-main strong em { padding: 1px 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); color: inherit; font-size: 6px; font-style: normal; }
.portal-chat-contact-main span { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8397ac; font-size: 7px; }
.portal-chat-contact.active .portal-chat-contact-main span { color: rgba(255, 255, 255, .72); }
.portal-chat-contact time { align-self: flex-start; color: #94a6b9; font-size: 6.5px; white-space: nowrap; }
.portal-chat-contact.active time { color: rgba(255, 255, 255, .65); }
.portal-chat-rail-foot { margin-top: auto; padding: 12px 14px; border-top: 1px solid #e1eaf3; display: flex; flex-direction: column; gap: 5px; }
.portal-chat-rail-foot small { color: #91a2b5; font-size: 6.5px; }
.portal-chat-panel { min-height: 540px; border: 0; border-radius: 0; }
.portal-chat-form { position: relative; }
.portal-chat-form .portal-chat-tool { width: 32px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #7389a1; }
.portal-chat-form .portal-chat-tool:hover { background: #eaf2fb; color: #1d4ed8; }
.portal-chat-form .portal-chat-tool svg { width: 16px; height: 16px; }
.portal-chat-form .portal-chat-send { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 8px; background: #1d4ed8; color: #fff; }
.portal-emoji-pop { position: absolute; left: 8px; bottom: 48px; z-index: 3; display: none; width: 196px; padding: 7px; grid-template-columns: repeat(7, 1fr); gap: 2px; border: 1px solid #dbe7f2; border-radius: 9px; background: #fff; box-shadow: 0 8px 22px rgba(15, 23, 42, .14); }
.portal-emoji-pop.open { display: grid; }
.portal-emoji-pop button { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; font-size: 14px; }
.portal-emoji-pop button:hover { background: #edf4fc; }
.portal-chat-date { align-self: center; margin: 4px 0 2px; padding: 2px 7px; border-radius: 4px; background: #eef3f9; color: #8b9db0; font-size: 6.5px; }
@media (max-width: 760px) {
  .portal-chat { grid-template-columns: 1fr; }
  .portal-chat-rail { display: none; }
  .portal-chat-panel { min-height: 460px; }
}


.portal-chat { height: calc(100vh - 210px); min-height: 560px; }
.portal-chat-panel, .portal-chat-rail { min-height: 0; }
@media (max-width: 760px) {
  .portal-chat { height: auto; min-height: 520px; }
}