/* Portal — Persian, RTL. Layout uses logical properties so nothing needs mirroring. */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: Vazirmatn, Tahoma, sans-serif; }

:root {
  --teal: #17808a;
  --teal-dark: #116470;
  --bg: #faf9f5;
  --panel: #fff;
  --line: #e8e5dd;
  --txt: #2b2a26;
  --muted: #7a766c;
  --danger: #b3261e;
}

body {
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.top {
  background: var(--panel);
  border-block-end: 1px solid var(--line);
  padding: 16px clamp(16px, 5vw, 48px);
}
.brand { font-weight: 800; font-size: 1.05rem; }

.wrap {
  flex: 1;
  width: 100%;
  /* A login form does not get better at 900px — narrow stays narrow on purpose. */
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(16px, 4vw, 40px) clamp(12px, 3vw, 24px);
}

/* Ticket list, thread and the new-ticket form: these hold real content, so they use the
   screen. Capped at 1040px because a support message set in a 1600px line is unreadable. */
.wrap--wide { max-width: 1040px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(18px, 4vw, 34px);
  box-shadow: 0 4px 18px rgba(60, 50, 30, .05);
}

@media (max-width: 520px) {
  /* edge-to-edge on a phone: a 16px gutter each side wastes a tenth of the screen */
  .card { border-radius: 14px; padding: 16px 14px; }
  .wrap { padding-inline: 10px; }
}

h1 { font-size: 1.25rem; font-weight: 800; margin-block-end: 10px; }
h2 { font-size: 1rem; font-weight: 700; margin-block: 22px 8px; }
.lead { color: var(--muted); line-height: 2; font-size: .92rem; margin-block-end: 18px; }

label { display: block; font-size: .85rem; font-weight: 600; margin-block-end: 6px; }

input[type="email"], input[type="text"] {
  width: 100%;
  max-width: 560px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 1rem;
  background: #fff;
  color: var(--txt);
}
input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

.btn {
  display: inline-block;
  width: 100%;
  max-width: 420px;
  margin-block-start: 14px;
  padding: 12px 18px;
  border: none;
  border-radius: 100px;
  background: var(--teal);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--teal-dark); }
.btn.secondary { background: transparent; color: var(--teal); border: 1px solid var(--teal); }
/* Filled but quiet — for actions that should look like buttons without competing with the
   solid teal ones for attention. */
.btn.soft { background: rgba(23, 128, 138, .09); color: var(--teal-dark); }
.btn.soft:hover { background: rgba(23, 128, 138, .17); color: var(--teal-dark); }

.sep { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .8rem; margin-block: 18px; }
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.err { color: var(--danger); font-size: .85rem; margin-block-start: 10px; }
.hint { color: var(--muted); font-size: .8rem; margin-block-start: 12px; line-height: 1.9; }

/* The code is Latin digits the customer copies from an email — keep it LTR and monospace
   so 6 and 9 cannot be confused, even inside an RTL paragraph. */
.code-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .35em; text-align: center; direction: ltr; }

.foot { color: var(--muted); font-size: .75rem; text-align: center; padding: 0 16px 28px; }

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row .btn { width: auto; flex: 1 1 auto; }

/* ── ticket list ─────────────────────────────────────────────────────────────────── */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.linkbtn { background: none; border: none; color: var(--muted); font: inherit; font-size: .82rem;
            cursor: pointer; text-decoration: underline;
            /* a 20px-high link is a miss on a phone — pad it to a real touch target */
            padding: 10px 8px; margin: -10px -8px; min-height: 40px; }
.linkbtn:hover { color: var(--teal); }

.tickets { display: flex; flex-direction: column; gap: 10px; margin-block-end: 22px; }
.ticket { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
          text-decoration: none; color: var(--txt); background: #fff; transition: border-color .12s, transform .12s; }
.ticket:hover { border-color: var(--teal); transform: translateY(-1px); }
.ticket.unread { border-inline-start: 3px solid var(--teal); }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ticket-title { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.ticket-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem;
                margin-block-start: 6px; flex-wrap: wrap; }
/* the last thing said in the thread — what actually tells two "گفتگو #…" rows apart */
.ticket-preview { color: var(--muted); font-size: .82rem; margin-block-start: 6px; line-height: 1.8;
                  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
                  unicode-bidi: plaintext; }
@media (min-width: 760px) {
  .ticket { padding: 16px 20px; }
  .ticket-title { font-size: 1rem; }
  .ticket-preview { -webkit-line-clamp: 2; }
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); display: inline-block; }

.pill { flex: none; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 100px; white-space: nowrap; }
.pill.active { background: rgba(23,128,138,.12); color: var(--teal-dark); }
.pill.closed { background: #eee9df; color: var(--muted); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: 18px; }
.pager .btn { width: auto; max-width: none; margin: 0; padding: 8px 16px; font-size: .85rem; }
.pager-pos { color: var(--muted); font-size: .8rem; }

/* ── thread ──────────────────────────────────────────────────────────────────────── */
.back { color: var(--teal); font-size: .85rem; text-decoration: none;
         display: inline-block; padding: 10px 4px; min-height: 40px; }
.back:hover { text-decoration: underline; }
.thread { display: flex; flex-direction: column; gap: 8px; margin-block-start: 14px; }

.day { text-align: center; color: var(--muted); font-size: .75rem; margin-block: 6px; }
.day span { background: var(--bg); padding: 2px 10px; border-radius: 100px; border: 1px solid var(--line); }

.msg { border: 1px solid var(--line); border-radius: 14px; padding: 6px 10px; background: #fff; max-width: 100%; }
@media (min-width: 700px) {
  /* Only wide enough for the alternation to be legible — on a phone, full width. */
  .msg { max-width: 76%; }
  .msg-body { font-size: .95rem; }
}
/* Both sides hang off the reading edge — the right, in RTL — rather than facing each other
   across the column. Sinaweb's replies sit flush against it; the customer's are stepped in,
   so the conversation reads as one indented thread instead of a zig-zag the eye has to
   track. The tint and the indent carry the distinction together, so it survives for anyone
   who cannot separate the two colours.

   Written as margin-inline (auto on the END side pushes the box to the START edge) so the
   whole arrangement mirrors correctly if this is ever rendered LTR. */
.msg.theirs { margin-inline-start: 0; margin-inline-end: auto; }
.msg.mine { margin-inline-start: 28px; margin-inline-end: auto;
            background: rgba(23,128,138,.07); border-color: rgba(23,128,138,.25); }
.msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-block-end: 1px; }
.msg-who { font-weight: 700; font-size: .8rem; }
.msg-head time { color: var(--muted); font-size: .72rem; }

/* Base direction is forced RTL rather than detected, so a paragraph that happens to start
   with an English word or a ticket number no longer flips the whole line to LTR. `isolate`
   keeps embedded English/URL runs laid out correctly inside that RTL paragraph. */
.msg-body { font-size: .9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
            direction: rtl; unicode-bidi: isolate; text-align: right; }
/* Blank lines in the source became paragraphs (see bodyHtml) — a small gap instead of a
   full empty line box is the single biggest saving in bubble height. */
.msg-body p { margin: 0; }
.msg-body p + p { margin-block-start: .35em; }
.msg-body a { color: var(--teal-dark); }

.choices { margin-block-start: 8px; padding-inline-start: 18px; color: var(--muted); font-size: .82rem; }
.files { margin-block-start: 8px; padding-inline-start: 18px; font-size: .82rem; }
.csat-note { margin-block-start: 8px; color: var(--muted); font-size: .78rem; }

/* ── write forms ─────────────────────────────────────────────────────────────────── */
textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
           font-size: .95rem; line-height: 1.9; background: #fff; color: var(--txt); resize: vertical;
           unicode-bidi: plaintext; }
textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.reply { margin-block-start: 22px; padding-block-start: 18px; border-block-start: 1px solid var(--line); }
.notice { background: rgba(23,128,138,.1); color: var(--teal-dark); border-radius: 12px;
          padding: 10px 14px; font-size: .85rem; margin-block-end: 14px; }

input[type="file"] { width: 100%; padding: 10px 12px; border: 1px dashed var(--line);
                     border-radius: 12px; background: #fff; font-size: .85rem; color: var(--muted); }
input[type="file"]::file-selector-button { font: inherit; font-size: .8rem; margin-inline-end: 10px;
  padding: 6px 12px; border: 1px solid var(--teal); border-radius: 100px;
  background: transparent; color: var(--teal); cursor: pointer; }
.file-label { margin-block-start: 12px; }


/* ── inbox shell: sidebar + open thread ──────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }

/* Two columns once there is room for both. In RTL the first grid item lands on the
   right automatically — no mirroring needed. The tools aside is last in the markup, so
   here it simply falls onto a second row under the ticket list. */
@media (min-width: 900px) {
  .shell--thread { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
}

/* Wide enough for the tools to get their own column without taking width off the thread:
   the page grows by exactly the new column, so the reading measure is unchanged.
   Placement is explicit because the markup order (list, thread, tools) is deliberately
   NOT the visual order (tools, list, thread) — column 1 is the right edge in RTL. */
@media (min-width: 1180px) {
  .wrap--wide:has(.shell--thread) { max-width: 1264px; }

  .shell--thread { grid-template-columns: minmax(176px, 208px) minmax(272px, 320px) minmax(0, 1fr); }
  .shell--thread .side--tools { grid-column: 1; grid-row: 1; }
  .shell--thread .side:not(.side--tools) { grid-column: 2; grid-row: 1; }
  .shell--thread .main { grid-column: 3; grid-row: 1; }

  .shell--list { grid-template-columns: minmax(176px, 208px) minmax(0, 1fr); }
  .shell--list .side--tools { grid-column: 1; grid-row: 1; }
  .shell--list .side:not(.side--tools) { grid-column: 2; grid-row: 1; }

  /* Topics collapsed: drop that column entirely and give the width to the thread. */
  .shell--thread.topics-hidden { grid-template-columns: minmax(176px, 208px) minmax(0, 1fr); }
  .shell--thread.topics-hidden #topics { display: none; }
  .shell--thread.topics-hidden .main { grid-column: 2; }
}

/* Between 900px and the three-column breakpoint there are only two columns, so collapsing
   topics leaves the thread alone in the row. */
@media (min-width: 900px) and (max-width: 1179px) {
  .shell--thread.topics-hidden { grid-template-columns: minmax(0, 1fr); }
  .shell--thread.topics-hidden #topics { display: none; }
}

/* The toggle sits beside the status pill, and swaps its own label. Ships hidden and is
   revealed by script — without JS it would be a button that does nothing.
   Same teal as «درخواست جدید», sized down: it is a real action, not a quiet link. */
.card-head-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn--sm { width: auto; max-width: none; margin-block-start: 0; padding: 7px 14px; font-size: .8rem; }
.topics-toggle[hidden] { display: none; }
.topics-toggle .when-hidden { display: none; }
.shell--thread.topics-hidden .topics-toggle .when-shown { display: none; }
.shell--thread.topics-hidden .topics-toggle .when-hidden { display: inline; }
/* On a phone the topics column is already hidden on this page, so the control is noise. */
@media (max-width: 899px) { .topics-toggle { display: none; } }

.side {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 16px; box-shadow: 0 4px 18px rgba(60, 50, 30, .05);
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
}
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.side-head h1 { font-size: 1.05rem; }
.side-who { color: var(--muted); font-size: .8rem; margin-block: 6px 12px; overflow-wrap: anywhere; }
.side .btn { margin-block: 0 14px; padding: 10px 16px; font-size: .9rem; }
.side .tickets { gap: 8px; margin-block-end: 0; }
.side .ticket { padding: 11px 13px; }
.side .ticket-title { font-size: .88rem; }
.side .ticket-preview { font-size: .78rem; -webkit-line-clamp: 1; }
.side .ticket-meta { font-size: .72rem; }

/* the open conversation, marked without relying on colour alone */
.ticket.is-active { border-color: var(--teal); background: rgba(23, 128, 138, .06); }
.ticket.is-active .ticket-title { color: var(--teal-dark); }

/* «دسترسی سریع» — the ai.sinaweb.org tools, in their own panel. Quieter than a ticket
   row on purpose: these are a way out of the page, not the reason the customer is on it. */
.side--tools { padding: 16px 14px; }
.side--tools h2 { font-size: .92rem; font-weight: 800; margin-block: 0; }
.side-links-note { color: var(--muted); font-size: .72rem; margin-block: 3px 10px; }
/* The account portal: the one link here that is the customer's own, so it gets weight the
   plain rows do not. Solid teal rather than a tint — it has to win against a list of ten. */
.side-featured {
  display: block; margin-block: 2px 14px;
  padding: 11px 12px; border-radius: 12px;
  background: var(--teal); color: #fff; text-decoration: none;
  box-shadow: 0 2px 10px rgba(23, 128, 138, .25);
}
.side-featured:hover, .side-featured:focus-visible { background: var(--teal-dark); }
.side-featured-title {
  display: flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: .87rem;
}
.side-featured-note {
  display: block; margin-block-start: 3px;
  font-size: .72rem; line-height: 1.7; color: rgba(255, 255, 255, .85);
}
.side-featured .ext { color: rgba(255, 255, 255, .8); font-size: .7rem; }

/* Logout closes this column. It lives here rather than with the tickets because that
   column can be collapsed, and hiding your topics must not hide the way out. */
.side-logout { margin-block-start: 12px; padding-block-start: 10px; border-block-start: 1px solid var(--line); }
.logout-btn { margin-block-start: 0; padding: 8px 14px; font-size: .82rem; }

.side-links-group + .side-links-group { margin-block-start: 12px; }
.side-links-group h3 {
  color: var(--muted); font-size: .72rem; font-weight: 700;
  letter-spacing: .02em; margin-block-end: 5px;
}
.side-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.side-links a {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; border-radius: 9px;
  color: var(--txt); text-decoration: none; font-size: .83rem;
}
.side-links a:hover, .side-links a:focus-visible {
  background: rgba(23, 128, 138, .07); color: var(--teal-dark);
}
/* the arrow leans on the text direction, so it points "away" in RTL too */
.side-links .ext { color: var(--muted); font-size: .7rem; }
.side-links a:hover .ext, .side-links a:focus-visible .ext { color: var(--teal); }

.main { margin: 0; }
.main .card-head h2 { font-size: 1.15rem; font-weight: 800; overflow-wrap: anywhere; }

/* On a phone the sidebar IS the page: the thread hides it, and «بازگشت به فهرست» goes
   back to /portal/list rather than trying to show both at once. */
.only-narrow { display: block; }
@media (min-width: 900px) {
  .only-narrow { display: none; }
  .shell--list .side { position: static; max-height: none; }
}
@media (max-width: 899px) {
  .shell--thread .side { display: none; }
  .side { position: static; max-height: none; }
}