/* Super Agent — AI centre, scoped under .crdts-dash.
   Ported from the reference design (credits-rewards-ui /dashboard/ai-center).
   Physical directions were replaced with logical ones so the EN/LTR shell keeps
   the same rhythm without a second stylesheet. */

.crdts-dash .btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:12px;transition:background .16s,box-shadow .16s}
.crdts-dash .btn svg{width:16px;height:16px}
.crdts-dash .btn:hover{background:var(--soft)}
.crdts-dash .btn:disabled{opacity:.4;cursor:not-allowed}
.crdts-dash .btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.crdts-dash .btn.primary:hover{background:#34342e}
.crdts-dash .btn.tinted{background:#fff7d4;border-color:#f4e9b7}
.crdts-dash .btn.text{background:none;border-color:transparent;color:var(--orange);padding:7px 0}

.crdts-dash .overview-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:11px;color:var(--muted)}
.crdts-dash .overview-label span:first-child{color:var(--ink);font-weight:700}

.crdts-dash .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:23px}
.crdts-dash .stat{background:#fff;border:1px solid var(--line);border-radius:11px;padding:14px 16px;position:relative}
.crdts-dash .stat.highlight{background:#fff7d4;border-color:#f3eabf}
.crdts-dash .stat-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}
.crdts-dash .stat-top svg{width:16px;height:16px;color:#b69b30}
.crdts-dash .stat strong{font-size:25px;display:block;margin:7px 0 2px;line-height:1.25}
.crdts-dash .stat strong small{font-size:11px;font-weight:400}
.crdts-dash .stat-foot{font-size:10px;color:var(--muted);display:flex;gap:5px;align-items:center}
.crdts-dash .stat-foot b{font-weight:400;color:#39805b}
.crdts-dash .stat-foot a{color:var(--orange);cursor:pointer}
.crdts-dash .spark{position:absolute;inset-inline-start:15px;bottom:28px;width:65px;height:26px;opacity:.8}

.crdts-dash .workspace-tabs{display:flex;gap:22px;align-items:center;border-bottom:1px solid #e6e6df;margin-bottom:18px;overflow:auto}
.crdts-dash .workspace-tabs button{display:flex;gap:7px;white-space:nowrap;padding:0 3px 13px;color:var(--muted);font-size:12px;border-bottom:2px solid transparent;transition:background .16s,box-shadow .16s}
.crdts-dash .workspace-tabs button svg{width:16px;height:16px}
.crdts-dash .workspace-tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--orange);font-weight:700}

.crdts-dash .workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:16px;align-items:start}
.crdts-dash .agent-panel,.crdts-dash .rail-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.crdts-dash .panel-top{padding:15px 20px;display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.crdts-dash .agent-id{display:flex;gap:10px;align-items:center}
.crdts-dash .agent-id strong{font-size:13px}
.crdts-dash .agent-id small{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);margin-top:4px}
.crdts-dash .status-dot{height:5px;width:5px;border-radius:50%;background:#65a77d;display:inline-block}
.crdts-dash .bot-mark{background:#fff5ce;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#c78e00;flex-shrink:0}
.crdts-dash .bot-mark svg{width:18px;height:18px}
.crdts-dash .action-row{display:flex;gap:8px;align-items:center}
.crdts-dash .mode-badge{font-size:10px;border:1px solid var(--line);padding:6px 9px;border-radius:20px;color:var(--muted);display:flex;gap:5px;align-items:center}
.crdts-dash .mode-badge svg{width:13px;height:13px}
.crdts-dash .quick-search{font-size:10px;padding:6px 9px}
.crdts-dash .quick-search[aria-pressed="true"]{background:#fff4c9;border-color:#ead981}

.crdts-dash .chat-body{padding:25px 25px 18px;min-height:350px;max-height:480px;overflow:auto;scroll-behavior:smooth}
.crdts-dash .welcome{text-align:center;padding:0 0 12px}
.crdts-dash .welcome-visual{height:88px;display:block;width:130px;margin:0 auto 10px}
.crdts-dash .welcome h2{font-size:22px;margin:4px 0 8px;letter-spacing:-.5px}
.crdts-dash .welcome h2 span{color:var(--orange)}
.crdts-dash .welcome p{font-size:12px;color:var(--muted);line-height:1.9;margin:0 auto;max-width:365px}
.crdts-dash .suggestions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:22px}
.crdts-dash .suggestion{border:1px solid var(--line);padding:13px 12px 12px;border-radius:9px;text-align:start;background:#fff;min-height:98px;transition:background .16s,box-shadow .16s}
.crdts-dash .suggestion:hover{background:#fffaf0;border-color:#edda99;transform:translateY(-1px)}
.crdts-dash .suggestion>svg{color:var(--orange);width:19px;height:19px;margin-bottom:7px}
.crdts-dash .suggestion strong{display:block;font-size:12px;margin-bottom:5px}
.crdts-dash .suggestion span{font-size:10px;color:var(--muted);display:block;line-height:1.7}

.crdts-dash .composer-wrap{padding:0 18px 15px;background:#fff}
.crdts-dash .composer{border:1px solid #deded4;border-radius:11px;background:#fcfcfa;padding:13px 14px 10px;transition:box-shadow .15s}
.crdts-dash .composer:focus-within{border-color:#d8b848;box-shadow:0 0 0 3px #fff8db}
.crdts-dash .composer textarea{background:none;border:0;outline:none;width:100%;min-height:54px;font-size:12px;color:var(--ink);line-height:1.8;resize:none;font:inherit}
.crdts-dash .compose-tools{display:flex;align-items:center;justify-content:space-between}
.crdts-dash .compose-tools .btn{padding:8px 16px}
.crdts-dash .compose-hint{color:#98988d;font-size:9px}
.crdts-dash .composer-note{display:flex;justify-content:center;align-items:center;gap:5px;font-size:10px;color:var(--muted);margin:10px 0 0}
.crdts-dash .composer-note svg{width:13px;height:13px}
.crdts-dash .mic{display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;width:32px;height:32px;color:var(--muted)}
.crdts-dash .mic svg{width:16px;height:16px}

.crdts-dash .rail{display:flex;flex-direction:column;gap:12px}
.crdts-dash .rail-card{padding:16px}
.crdts-dash .rail-title{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:12px}
.crdts-dash .rail-title h2{font-size:12px;margin:0}
.crdts-dash .rail-title svg{width:16px;height:16px;color:var(--muted)}
.crdts-dash .ag-count{background:var(--soft);border-radius:4px;font-size:10px;padding:1px 6px;color:var(--muted)}
.crdts-dash .new-chat{width:100%;margin-bottom:12px}
.crdts-dash .small-search{width:100%;padding:8px 10px;background:var(--soft);border:0;border-radius:6px;font-size:10px;margin-bottom:7px;color:var(--ink);outline:none}
.crdts-dash .empty-history{font-size:10px;color:var(--muted);text-align:center;padding:13px 2px 5px;line-height:1.9}
.crdts-dash .empty-history svg{display:block;margin:0 auto 10px;color:#c8c8b7;width:22px;height:22px}
.crdts-dash .history-item{display:flex;width:100%;text-align:start;gap:7px;padding:9px;border-radius:7px;font-size:11px;align-items:center}
.crdts-dash .history-item svg{width:15px;height:15px;flex-shrink:0}
.crdts-dash .history-item.selected{background:var(--soft)}
.crdts-dash .history-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crdts-dash .approval-empty{display:flex;gap:10px;align-items:center}
.crdts-dash .shield-icon{width:36px;height:36px;display:grid;place-items:center;background:#fff8dc;border-radius:50%;color:#bd9200;flex-shrink:0}
.crdts-dash .shield-icon svg{width:17px;height:17px}
.crdts-dash .approval-empty b{font-size:11px;display:block;margin-bottom:4px}
.crdts-dash .rail p{font-size:10px;color:var(--muted);line-height:1.9;margin:5px 0}
.crdts-dash .rail-card.usage{background:#fffcf0;border-color:#f2ecd1}
.crdts-dash .token-number{font-size:21px;font-weight:700}
.crdts-dash .token-number small{font-size:10px;font-weight:400;color:var(--muted)}
.crdts-dash .usage-top{display:flex;align-items:center;justify-content:space-between}
.crdts-dash .tag{padding:4px 7px;font-size:9px;border-radius:5px;background:#fff4ca;color:#8d7219}
.crdts-dash .usage-track{height:4px;border-radius:9px;background:#ece5c8;margin:11px 0}
.crdts-dash .usage-track span{display:block;height:100%;background:#dfb817;border-radius:9px}
.crdts-dash .usage details summary{font-size:10px;cursor:pointer;color:#8b7951}
.crdts-dash .usage details p{margin-top:8px}
.crdts-dash .control-note{display:flex;gap:8px;padding:2px 9px;font-size:10px;line-height:1.9;color:var(--muted)}
.crdts-dash .control-note svg{width:17px;flex-shrink:0;color:#9c9c8a}

.crdts-dash .message{margin:12px 0;line-height:1.9;font-size:12px}
.crdts-dash .message.user{background:#fff7d4;border:1px solid #f3ebc9;border-radius:12px 12px 3px 12px;padding:11px 15px;max-width:90%;margin-inline-start:auto}
.crdts-dash .message.agent{padding:15px;background:var(--soft);border-radius:3px 12px 12px 12px}
.crdts-dash .message h3{font-size:14px;margin:0 0 8px}
.crdts-dash .message p{margin:5px 0}
.crdts-dash .message ul{margin:8px 0;padding-inline-start:19px}
.crdts-dash .message .sample{font-size:10px;color:#94896e;margin-bottom:8px;display:block}
.crdts-dash .response-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}
.crdts-dash .response-stats div{padding:9px;background:#fff;border:1px solid var(--line);border-radius:7px}
.crdts-dash .response-stats b{font-size:17px;display:block}
.crdts-dash .response-stats small{font-size:9px;color:var(--muted)}
.crdts-dash .pending-card{padding:11px;border:1px solid #f0e4b2;border-radius:8px;background:#fffcf0;font-size:11px}
.crdts-dash .pending-card strong{font-size:11px}
.crdts-dash .pending-card .action-row{margin-top:10px;flex-wrap:wrap}
.crdts-dash .pending-card .btn{font-size:10px;padding:6px 10px}

.crdts-dash .state-content{padding:25px;min-height:430px}
.crdts-dash .state-content h2{font-size:21px;margin:0 0 8px}
.crdts-dash .state-content>p{color:var(--muted);font-size:12px;line-height:1.8}
.crdts-dash .recommendation{border:1px solid var(--line);border-radius:10px;padding:17px;margin-top:12px;display:flex;gap:14px;align-items:flex-start}
.crdts-dash .recommendation h3{font-size:13px;margin:0 0 7px}
.crdts-dash .recommendation p{font-size:11px;line-height:1.8;color:var(--muted);margin:0}
.crdts-dash .recommendation .btn{margin-top:12px}
.crdts-dash .goal-form{display:grid;gap:15px;margin-top:23px;max-width:440px}
.crdts-dash .goal-form label{font-size:12px;display:grid;gap:7px}
.crdts-dash .goal-form input,.crdts-dash .goal-form select{padding:11px;border:1px solid #e5e5dd;border-radius:7px;background:#fff;color:var(--ink);font-size:12px}
.crdts-dash .goal-form .btn{justify-self:start}
.crdts-dash .goal-item{padding:14px;background:var(--soft);border-radius:8px;margin-top:12px;font-size:12px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.crdts-dash .settings-row{display:flex;justify-content:space-between;gap:20px;align-items:center;border:1px solid var(--line);padding:18px;border-radius:10px;margin:22px 0}
.crdts-dash .settings-row strong{font-size:13px}
.crdts-dash .settings-row p{font-size:11px;color:var(--muted);margin:7px 0 0}
.crdts-dash .switch{width:44px;height:26px;border-radius:30px;background:#deded4;padding:3px;flex-shrink:0;transition:background .2s}
.crdts-dash .switch span{display:block;height:20px;width:20px;background:#fff;border-radius:50%;transition:transform .2s}
.crdts-dash .switch[aria-checked="true"]{background:var(--orange)}
.crdts-dash .switch[aria-checked="true"] span{transform:translateX(-18px)}
.crdts-dash .ltr .switch[aria-checked="true"] span{transform:translateX(18px)}
.crdts-dash .log-item{display:flex;align-items:flex-start;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);font-size:12px}
.crdts-dash .log-item svg{color:var(--orange);width:16px;height:16px;flex-shrink:0;margin-top:2px}
.crdts-dash .log-item small{display:block;font-size:10px;color:var(--muted);margin-top:5px}
.crdts-dash .notice{padding:13px 15px;background:#fff9e4;border:1px solid #f0e8c9;border-radius:8px;font-size:11px;line-height:1.9;color:#85744c}
.crdts-dash .view{display:none}
.crdts-dash .view.active{display:block}
.crdts-dash .blank-log{text-align:center;margin:65px 0;color:var(--muted);font-size:12px}
.crdts-dash .blank-log svg{display:block;width:35px;height:35px;margin:0 auto 12px;color:#d6c47c}
.crdts-dash .ag-footer{margin-top:26px;padding-top:18px;font-size:10px;color:var(--muted);display:flex;justify-content:space-between;border-top:1px solid var(--line)}

@media(min-width:1600px){
  .crdts-dash .chat-body{min-height:410px}
  .crdts-dash .welcome{padding-top:16px}
  .crdts-dash .suggestions{margin-top:30px}
  .crdts-dash .welcome h2{font-size:25px}
}
@media(max-width:1200px){
  .crdts-dash .workspace-grid{grid-template-columns:minmax(0,1fr) 218px}
  .crdts-dash .stat{padding:12px}
  .crdts-dash .spark{display:none}
  .crdts-dash .stat-foot{font-size:9px}
  .crdts-dash .chat-body{padding:20px 16px}
  .crdts-dash .suggestion{padding:10px}
}
@media(max-width:1000px){
  .crdts-dash .workspace-grid{grid-template-columns:1fr}
  .crdts-dash .rail{display:grid;grid-template-columns:repeat(3,1fr)}
  .crdts-dash .control-note{grid-column:1/-1}
  .crdts-dash .stat-grid{gap:8px}
  .crdts-dash .workspace-tabs{gap:18px}
  .crdts-dash .rail-card{padding:13px}
  .crdts-dash .chat-body{min-height:340px}
}
@media(max-width:760px){
  .crdts-dash .stat-grid{grid-template-columns:repeat(2,1fr);margin-bottom:20px}
  .crdts-dash .stat strong{font-size:23px}
  .crdts-dash .stat{padding:13px}
  .crdts-dash .stat-foot{font-size:10px}
  .crdts-dash .workspace-tabs{gap:20px}
  .crdts-dash .workspace-tabs button{font-size:11px}
  .crdts-dash .suggestions{grid-template-columns:1fr;gap:7px;margin-top:17px}
  .crdts-dash .suggestion{min-height:0;display:grid;grid-template-columns:23px 1fr;column-gap:9px;padding:11px}
  .crdts-dash .suggestion>svg{grid-row:1/3;margin-top:3px}
  .crdts-dash .suggestion strong{font-size:12px}
  .crdts-dash .suggestion span{font-size:10px}
  .crdts-dash .welcome h2{font-size:21px}
  .crdts-dash .welcome p{font-size:11px}
  .crdts-dash .welcome-visual{height:75px;margin-top:2px}
  .crdts-dash .chat-body{max-height:none;min-height:0;padding:20px 14px}
  .crdts-dash .rail{grid-template-columns:1fr}
  .crdts-dash .rail-card{padding:16px}
  .crdts-dash .control-note{grid-column:auto}
  .crdts-dash .panel-top{padding:13px}
  .crdts-dash .mode-badge{display:none}
  .crdts-dash .quick-search{font-size:10px}
  .crdts-dash .composer-wrap{padding:0 12px 12px}
  .crdts-dash .composer-note{font-size:9px}
  .crdts-dash .compose-hint{display:none}
  .crdts-dash .state-content{padding:20px}
  .crdts-dash .recommendation{padding:13px}
  .crdts-dash .response-stats{gap:5px}
  .crdts-dash .response-stats small{font-size:8px}
  .crdts-dash .ag-footer{flex-direction:column;gap:4px}
}
@media(min-width:1001px){
  .crdts-dash .stat-grid{margin-bottom:17px}
  .crdts-dash .stat{padding-top:11px;padding-bottom:11px}
  .crdts-dash .chat-body{min-height:300px;max-height:390px;padding-top:17px}
  .crdts-dash .welcome-visual{height:70px;margin-bottom:6px}
  .crdts-dash .welcome h2{font-size:21px}
  .crdts-dash .welcome{padding:0 0 4px}
  .crdts-dash .suggestions{margin-top:16px}
  .crdts-dash .suggestion{min-height:84px;padding:11px}
  .crdts-dash .composer textarea{min-height:42px}
  .crdts-dash .workspace-tabs{margin-bottom:15px}
}