/* Fluent 2 page styles — system module. Uses only tokens from fluent-tokens.css (no hex, no raw px for
   spacing/type). Loaded after styles.css. Owned by the system pages; keep selectors scoped to them.
   Pages: sign-in (#loginScreen) and its dialogs, chat, notifications (page + bell popover),
   announcements, settings, activity log. Shared helpers use the `sys-` prefix. */

/* ============================== Shared helpers ============================== */
/* Empty state: centred 32px icon + one line of text. */
.sys-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalS);padding:var(--spacingVerticalXXXL) var(--spacingHorizontalXXL);text-align:center;color:var(--colorNeutralForeground3);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300)}
.sys-empty > i{font-size:var(--fontSizeHero800);line-height:1;color:var(--colorNeutralForeground4)}
/* Fluent Link rendered as a <button> (keeps the onclick handler, reads as a link). */
.sys-link{display:inline;padding:0;margin:0;border:0;background:transparent;color:var(--colorBrandForegroundLink);font:inherit;font-weight:var(--fontWeightSemibold);text-decoration:none;cursor:pointer;border-radius:var(--borderRadiusSmall)}
.sys-link:hover{color:var(--colorBrandForegroundLinkHover);text-decoration:underline}
.sys-link:active{color:var(--colorBrandForegroundLinkHover)}
/* Fluent subtle button (no fill, no border until hover). */
.sys-subtle-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacingHorizontalSNudge);min-height:var(--controlHeightMedium);padding:0 var(--spacingHorizontalS);border:var(--strokeWidthThin) solid transparent;border-radius:var(--borderRadiusMedium);background:transparent;color:var(--colorBrandForeground1);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightSemibold);white-space:nowrap;cursor:pointer;transition:background-color var(--durationFaster) var(--curveEasyEase),color var(--durationFaster) var(--curveEasyEase)}
.sys-subtle-btn:hover{background:var(--colorSubtleBackgroundHover);color:var(--colorBrandForegroundLinkHover)}
.sys-subtle-btn:active{background:var(--colorSubtleBackgroundPressed)}
/* Fill-only badges. */
.sys-badge{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS);min-height:20px;padding:0 var(--spacingHorizontalS);border-radius:var(--borderRadiusCircular);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);font-weight:var(--fontWeightSemibold);white-space:nowrap}
.sys-badge.warning{background:var(--tint-warning-bg);color:var(--tint-warning-fg)}
.sys-badge.neutral{background:var(--tint-neutral-bg);color:var(--tint-neutral-fg)}
.sys-badge.brand{background:var(--tint-brand-bg);color:var(--tint-brand-fg)}
/* 32px tinted icon square (colour from the shared .cat-* classes in styles.css). */
.sys-icon-sq{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300)}
/* Chat-list search field with a leading magnifier (Fluent SearchBox); page-level .search-box gets
   its magnifier from styles.css. */
.sys-search{position:relative;display:flex;align-items:center;flex:1;width:100%;max-width:var(--field-w-l)}
.sys-search > i{position:absolute;inset-inline-start:var(--spacingHorizontalMNudge);color:var(--colorNeutralForeground3);font-size:var(--fontSizeBase300);pointer-events:none}
.sys-search > input{flex:1;width:100%;min-width:0;max-width:none}
.chat-search .sys-search > input{padding-inline-start:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXL))}
/* Page subtitle under the canvas title, and a description under a canvas section title. */
.sys-page-sub{margin-top:var(--spacingVerticalXS);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3);font-weight:var(--fontWeightRegular)}
.sys-section-desc{margin:calc(-1 * var(--spacingVerticalS)) 0 var(--spacingVerticalM);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground3)}

/* Dialog content (forgot password, create account, new announcement). Fluent dialogs are ~560px. */
#modal .modal-content:has(.sys-dialog-form){max-width:560px}
.sys-dialog-text{margin-bottom:var(--spacingVerticalL);font-size:var(--fontSizeBase300);line-height:1.7;color:var(--colorNeutralForeground2)}
.sys-dialog-form .form-group label{font-weight:var(--fontWeightSemibold)}
.sys-field-hint{margin-top:var(--spacingVerticalXS);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.sys-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--spacingHorizontalM)}
.sys-form-row + .sys-field-hint{margin:calc(-1 * var(--spacingVerticalS)) 0 var(--spacingVerticalM)}
.form-group label.sys-check{display:inline-flex;align-items:center;gap:var(--spacingHorizontalS);font-weight:var(--fontWeightRegular);cursor:pointer;min-height:var(--controlHeightMedium);margin-bottom:0}
.sys-dialog-actions{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalS);margin-top:var(--spacingVerticalXXL)}
@media (max-width:480px){
    .sys-form-row{grid-template-columns:1fr}
    .sys-dialog-actions .btn{flex:1}
}

/* ============================== Sign-in (Microsoft sign-in pattern) ============================== */
/* Soft branded backdrop with two large translucent "petals", a centred card, a footer line. */
#loginScreen{flex-direction:column;align-items:center;position:relative;isolation:isolate;overflow-x:hidden;padding:var(--spacingVerticalXXXL) var(--spacingHorizontalL) var(--spacingVerticalL)}
#loginScreen::before,#loginScreen::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:42%;background:var(--colorBrandBackground2);border:var(--strokeWidthThin) solid var(--colorBrandStroke2);opacity:.6}
#loginScreen::before{width:980px;height:980px;top:-560px;left:-340px;transform:rotate(24deg)}
#loginScreen::after{width:820px;height:820px;bottom:-520px;right:-300px;transform:rotate(-16deg)}
:root:not([data-theme="dark"]) #loginScreen::before,:root:not([data-theme="dark"]) #loginScreen::after{opacity:.9}
#loginScreen .theme-toggle--login{top:var(--spacingVerticalL);left:var(--spacingHorizontalL);color:var(--colorNeutralForeground3)}
#loginScreen .login-card{position:relative;width:100%;max-width:var(--layout-login-max-w);margin-block:auto;padding:var(--spacingVerticalXXXL) var(--spacingHorizontalXXXL);border-radius:var(--borderRadiusLarge);box-shadow:var(--shadow16)}
.sys-login-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingHorizontalS);font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1)}
.sys-login-brand i{font-size:var(--fontSizeBase500);color:var(--colorBrandForeground1)}
.sys-login-title{margin-top:var(--spacingVerticalXXL);text-align:center;font-size:var(--fontSizeBase600);line-height:var(--lineHeightBase600);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1)}
.sys-login-sub{margin-top:var(--spacingVerticalS);text-align:center;font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground2)}
.sys-login-fields{margin-top:var(--spacingVerticalXXL)}
#loginScreen .form-group{margin-bottom:var(--spacingVerticalL)}
#loginScreen .form-group label{margin-bottom:var(--spacingVerticalXS);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground1)}
#loginScreen .form-control{min-height:var(--controlHeightLarge);padding-inline:var(--spacingHorizontalM)}
.sys-login-forgot{margin:calc(-1 * var(--spacingVerticalS)) 0 var(--spacingVerticalXL);font-size:var(--fontSizeBase300)}
#loginError{margin-bottom:var(--spacingVerticalL)}
#loginScreen .btn-lg{min-height:var(--controlHeightLarge);font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400)}
.sys-login-alt{margin-top:var(--spacingVerticalXL);text-align:center;font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground2)}
.sys-login-footer{margin-top:var(--spacingVerticalXXL);text-align:center;font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
@media (max-width:480px){
    #loginScreen{padding:var(--spacingVerticalXXXL) var(--spacingHorizontalM) var(--spacingVerticalM)}
    #loginScreen .login-card{padding:var(--spacingVerticalXXL) var(--spacingHorizontalXL)}
    .sys-login-title{margin-top:var(--spacingVerticalXL)}
}
@media (pointer:coarse){
    .sys-link{display:inline-flex;align-items:center;min-height:var(--controlHeightMedium)}
}

/* ============================== Notifications: bell popover ============================== */
#notifDropdown{width:360px;border:0;border-radius:var(--borderRadiusMedium);box-shadow:var(--shadow16)}
#notifDropdown .ndd-head{gap:var(--spacingHorizontalS);padding:var(--spacingVerticalM) var(--spacingHorizontalL);font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400)}
#notifDropdown .ndd-head-title{display:inline-flex;align-items:center;gap:var(--spacingHorizontalS)}
#notifDropdown .ndd-head .sys-link{font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200)}
#notifDropdown .ndd-item{gap:var(--spacingHorizontalM);padding:var(--spacingVerticalM) var(--spacingHorizontalL);border-bottom-color:var(--colorNeutralStroke2)}
#notifDropdown .ndd-item:last-child{border-bottom:0}
#notifDropdown .ndd-item.unread{background:transparent}
#notifDropdown .ndd-item.unread:hover{background:var(--colorSubtleBackgroundHover)}
#notifDropdown .ndd-icon{font-size:var(--fontSizeBase300)}
#notifDropdown .ndd-title{font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground1)}
#notifDropdown .ndd-item.unread .ndd-title{font-weight:var(--fontWeightSemibold)}
#notifDropdown .ndd-msg{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground2)}
#notifDropdown .ndd-time{margin-top:var(--spacingVerticalXS);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
#notifDropdown .ndd-dot{margin-top:var(--spacingVerticalS)}
#notifDropdown .ndd-empty{padding:var(--spacingVerticalXXL) var(--spacingHorizontalL)}
#notifDropdown .ndd-foot{padding:var(--spacingVerticalS) var(--spacingHorizontalS)}
#notifDropdown .ndd-foot .sys-subtle-btn{width:100%}
@media (max-width:640px){ #notifDropdown{width:auto;max-width:none} }
@media (hover:none){ #notifDropdown .ndd-item:hover,#notifDropdown .ndd-item.unread:hover{background:transparent} }

/* ============================== Notifications page ============================== */
/* One white list card; each row = tinted icon square, title, message, meta line, unread dot. */
#notifications .notif-list{margin-top:0}
#notifications .notif-row{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--spacingVerticalS) var(--spacingHorizontalM);min-height:64px;padding:var(--spacingVerticalM) var(--spacingHorizontalL) var(--spacingVerticalM) var(--spacingHorizontalXL);border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
#notifications .notif-row:last-child{border-bottom:0}
#notifications .notif-row.unread{background:transparent}
@media (hover:hover){#notifications .notif-row:hover{background:var(--colorSubtleBackgroundHover)}}
#notifications .notif-cat-icon{width:32px;height:32px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300)}
#notifications .notif-main{flex:1 1 0;min-width:0}
#notifications .notif-row-title{display:block;font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground1)}
#notifications .notif-row.unread .notif-row-title{font-weight:var(--fontWeightSemibold)}
#notifications .notif-row-msg{margin-top:var(--spacingVerticalXXS);font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);color:var(--colorNeutralForeground2)}
#notifications .notif-row-time{margin-top:var(--spacingVerticalXS);flex-wrap:wrap;gap:var(--spacingHorizontalXS);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
#notifications .notif-new-dot{position:absolute;top:calc(var(--spacingVerticalM) + 12px);inset-inline-start:var(--spacingHorizontalS);width:8px;height:8px}
#notifications .sys-notif-aside{display:flex;align-items:center;flex-shrink:0;margin-inline-start:auto}
@media (max-width:480px){
    #notifications .notif-row{padding-inline:var(--spacingHorizontalXL) var(--spacingHorizontalM)}
    #notifications .sys-notif-aside{flex-basis:100%;justify-content:flex-end;margin-top:calc(-1 * var(--spacingVerticalXS))}
}

/* ============================== Announcements ============================== */
#announcements .ann-item{padding:var(--spacingVerticalL) var(--spacingHorizontalL)}
#announcements .ann-item.important{background:var(--colorNeutralBackground1)}
.sys-ann-head{display:flex;align-items:flex-start;gap:var(--spacingHorizontalM)}
.sys-ann-titles{flex:1;min-width:0}
.sys-ann-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacingHorizontalS);font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);overflow-wrap:anywhere}
.sys-ann-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacingVerticalXXS) var(--spacingHorizontalS);margin-top:var(--spacingVerticalXXS);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.sys-ann-meta .sys-sep{color:var(--colorNeutralForeground4)}
.sys-ann-body{margin-top:var(--spacingVerticalM);padding-inline-start:calc(var(--spacingHorizontalXXXL) + var(--spacingHorizontalM));font-size:var(--fontSizeBase300);line-height:1.7;color:var(--colorNeutralForeground1);white-space:pre-line;overflow-wrap:anywhere}
@media (max-width:480px){
    #announcements .ann-item{padding:var(--spacingVerticalL) var(--spacingHorizontalL)}
    .sys-ann-body{padding-inline-start:0}
}

/* ============================== Settings (setting-row cards, Microsoft account style) ============================== */
#settings .sys-set-card{padding:0;overflow:hidden}
#settings .sys-set-head{display:flex;align-items:flex-start;gap:var(--spacingHorizontalM);padding:var(--spacingVerticalL) var(--spacingHorizontalL);border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
#settings .sys-set-icon{flex-shrink:0;width:20px;text-align:center;font-size:var(--fontSizeBase500);line-height:var(--lineHeightBase400);color:var(--colorNeutralForeground2)}
#settings .sys-set-title{font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400);font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1)}
#settings .sys-set-title label{display:inline;margin:0;font:inherit;color:inherit}
#settings .sys-set-desc{margin-top:var(--spacingVerticalXXS);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
#settings .sys-set-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacingVerticalS) var(--spacingHorizontalM);min-height:52px;padding:var(--spacingVerticalS) var(--spacingHorizontalL)}
#settings .sys-set-card > .sys-set-row + .sys-set-row{border-top:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
#settings .sys-set-body{padding:var(--spacingVerticalL)}
#settings .sys-set-body textarea{display:block}
#settings .sys-set-text{flex:1 1 200px;min-width:0}
#settings label.sys-set-label{display:block;margin:0;font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground1)}
#settings .sys-set-row > .form-control{margin-inline-start:auto}
/* Working days: checkbox + day name at the start, "from / to" time fields at the end. */
#settings label.sys-day-check{display:flex;align-items:center;gap:var(--spacingHorizontalM);min-width:140px;min-height:var(--controlHeightMedium);margin:0;font-weight:var(--fontWeightRegular);cursor:pointer}
#settings .sys-day-name{font-size:var(--fontSizeBase300);color:var(--colorNeutralForeground1)}
#settings .day-hours-row:has(.working-day:not(:checked)) .sys-day-name{color:var(--colorNeutralForeground3)}
#settings .sys-day-hours{display:flex;align-items:center;gap:var(--spacingHorizontalS);margin-inline-start:auto}
#settings .sys-day-hours > span{font-size:var(--fontSizeBase200);color:var(--colorNeutralForeground3)}
#settings .sys-day-hours input[type="time"]{width:var(--field-w-xs);max-width:var(--field-w-xs)}
#settings .sys-set-actions{display:flex;gap:var(--spacingHorizontalS);margin-top:var(--spacingVerticalXS)}
/* Subjects: list rows with icon actions + an "add" row at the bottom of the same card. */
#settings .sys-subject-row{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
#settings .sys-row-title{flex:1;min-width:0;font-size:var(--fontSizeBase300);color:var(--colorNeutralForeground1);overflow-wrap:anywhere}
#settings .sys-row-actions{display:flex;align-items:center;gap:var(--spacingHorizontalXS)}
#settings .sys-subjects-empty{padding:var(--spacingVerticalXXL) var(--spacingHorizontalL);border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
#settings .sys-add-row{padding-block:var(--spacingVerticalM)}
#settings .sys-add-row .form-control{flex:1 1 200px}
#settings .sys-add-row .btn{white-space:nowrap}
#settings .sys-add-row{align-items:flex-end}
#settings .sys-add-field{flex:1 1 200px;margin:0}
#settings .sys-add-field .form-control{max-width:none}
@media (max-width:768px){
    #settings .sys-day-hours input[type="time"]{width:var(--field-w-xs)}
}
@media (max-width:480px){
    #settings .sys-set-row{padding-inline:var(--spacingHorizontalM)}
    #settings .sys-day-hours{display:grid;grid-template-columns:auto 1fr auto 1fr;width:100%;margin-inline-start:0}
    #settings .sys-day-hours input[type="time"]{width:100%;max-width:none;min-width:0}
    #settings .sys-set-row > .form-control{margin-inline-start:0;max-width:none}
    #settings .sys-set-actions .btn{flex:1}
    #settings .sys-add-row{flex-wrap:nowrap}
    #settings .sys-add-row .form-control{flex:1 1 0;min-width:0;max-width:none}
}

/* ============================== Activity log ============================== */
#logs .search-box{margin-bottom:var(--spacingVerticalM)}
/* Room for the global .search-box magnifier (styles.css); its padding-inline-start is currently
   overridden there by the later `padding` shorthand of `.search-box input`. */
#logs .search-box input{padding-inline-start:calc(var(--spacingHorizontalM) + var(--spacingHorizontalXL))}
#logs td.sys-log-user,#logs td.sys-log-time{white-space:nowrap}
#logs td.sys-log-action{white-space:nowrap}
#logs td.sys-log-details{color:var(--colorNeutralForeground2)}
#logs td.sys-log-time{color:var(--colorNeutralForeground3);font-variant-numeric:tabular-nums}
#logs tr.sys-log-empty:hover{background:transparent}

/* ============================== Chat (Teams pattern) ============================== */
/* The page fills the content area: title on the canvas, then one card (list + conversation). */
#chat.page.active{display:flex;flex-direction:column;height:100%;min-height:520px}
#chat .chat-container{flex:1 1 auto;width:100%;height:auto;min-height:0;max-width:none}
/* Dark: the canvas and the conversation pane share Background2, so the pane sinks one step
   (Background3) to keep the card's edge and the message bubbles readable. */
@media screen{ :root[data-theme="dark"] #chat .chat-container{--chat-bg:var(--colorNeutralBackground3)} }
#chat .chat-search{padding:var(--spacingVerticalS) var(--spacingHorizontalS)}
#chat .chat-item{margin:var(--spacingVerticalXXS) var(--spacingHorizontalXS);padding:var(--spacingVerticalS) var(--spacingHorizontalS);border-radius:var(--borderRadiusMedium);gap:var(--spacingHorizontalM)}
#chat .chat-item .name-row{row-gap:var(--spacingVerticalXXS)}
#chat .chat-item .last-msg-row{margin-top:var(--spacingVerticalXXS)}
#chat .chat-window-header{min-height:64px;padding:var(--spacingVerticalS) var(--spacingHorizontalL);gap:var(--spacingHorizontalM)}
#chat .chat-window-header .avatar{width:36px;height:36px}
#chat .sys-chat-sub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacingHorizontalXS)}
#chat .chat-messages .sys-empty{margin:auto}
#chat .chat-window > .sys-empty{height:100%}
#chat .chat-input{padding:var(--spacingVerticalM) var(--spacingHorizontalL);gap:var(--spacingHorizontalS)}
#chat .chat-input .chat-buttons{gap:var(--spacingHorizontalXS)}
#chat .chat-input .chat-buttons .btn{min-width:var(--controlHeightLarge);height:var(--controlHeightLarge);min-height:var(--controlHeightLarge)}
#chat .chat-input .chat-buttons .btn-outline{background:transparent;border-color:var(--colorNeutralStroke1);color:var(--colorNeutralForeground1)}
#chat .chat-input .chat-buttons .btn-outline:hover{background:var(--colorSubtleBackgroundHover);color:var(--colorNeutralForeground2BrandHover)}
@media (max-width:768px){
    /* The bottom padding reserved for the assistant launcher would leave a gap under a
       full-height chat; the list reserves its own room for the launcher instead. */
    #app main:has(> #chat.active){padding-bottom:var(--spacingVerticalM)}
    #chat.page.active{min-height:360px}
    #chat .chat-container{border-radius:var(--borderRadiusLarge);box-shadow:var(--shadow4)}
    #chat .chat-list::after{content:"";display:block;flex-shrink:0;height:72px}
    /* An open conversation gets the whole height: no page title, no floating launcher over the composer. */
    #chat:has(.chat-conversation-open) .card-header{display:none}
    body:has(#chat.active .chat-conversation-open) #pa-dock{display:none}
    #chat .chat-window-header{padding-inline:var(--spacingHorizontalS) var(--spacingHorizontalM)}
    #chat .chat-input{padding:var(--spacingVerticalS) var(--spacingHorizontalS)}
}
@media (max-width:480px){
    #chat .chat-input .chat-buttons .btn{min-width:var(--controlHeightLarge);height:var(--controlHeightLarge)}
}

/* Announcement actions (admin, business rule Q8): edit and delete. */
.sys-ann-actions{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalS);margin-top:var(--spacingVerticalM)}
.btn.sys-btn-danger{color:var(--tint-danger-fg)}
.btn.sys-btn-danger:hover{background:var(--tint-danger-bg);border-color:var(--tint-danger-border);color:var(--tint-danger-fg)}

/* Touch screens: «تمت القراءة» gets a full tap area (UX_PLAN 5). */
@media (pointer:coarse){.sys-subtle-btn{min-height:var(--touchTarget)}}

/* An open conversation's «إرسال» button stays visible: the assistant's button steps aside on every
   screen size while a conversation is open (it's back on every other page). */
body:has(#chat.active .chat-conversation-open) #pa-dock{display:none}
/* Phones: the open conversation's typing bar must fit the screen, so the push-notification invitation steps
   aside while a conversation is open (it shows again on every other page). */
@media(max-width:768px){body:has(#chat.active .chat-conversation-open) #notifPermBanner{display:none}}
/* Phones: the message box takes the full width and «إرسال» sits under it, full width, with its word. */
@media(max-width:640px){
    #chat .chat-input{flex-wrap:wrap}
    #chat .chat-input > input{flex:1 1 100%}
    #chat .chat-input .chat-buttons{flex:1 1 100%;display:flex}
    #chat .chat-input .chat-buttons .btn{flex:1 1 0}
}


/* A subject's grades (PM 1): a second, quieter line under its name; the edit dialog puts «من صف» / «إلى صف» side by
   side, wrapping on phones. */
.sys-row-sub{display:block;margin-top:var(--spacingVerticalXXS);font-weight:var(--fontWeightRegular);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3)}
.sys-row-sub .fas{margin-inline-end:var(--spacingHorizontalXS)}
.sys-dialog-row{display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalM)}
/* The add-subject row now holds the name, «من صف» and «إلى صف» (PM 1): it wraps, and on phones each control takes the
   full width (the button too), so nothing is squeezed. */
#settings .sys-add-row{flex-wrap:wrap}
@media (max-width:480px){
    #settings .sys-add-row{flex-wrap:wrap}
    #settings .sys-add-row .sys-add-field,#settings .sys-add-row .btn{flex:1 1 100%}
}