/* App shell (layout B): left menu, content, Agent panel. Plan views, inbox and chat. */
body.signed-in .topbar { display: none; }
body.signed-in .workspace { max-width: none; padding: 0; }
#studio:not([hidden]) { display: grid; grid-template-columns: 232px minmax(0, 1fr) 360px; min-height: 100vh; }
#studio.agent-hidden { grid-template-columns: 232px minmax(0, 1fr); }
#studio.agent-hidden .agent-panel { display: none; }
.studio-body { min-width: 0; padding: 0 clamp(20px, 3vw, 40px); }

.app-nav { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 22px 14px 18px;
  background: var(--white); border-right: 1px solid var(--line); border-bottom: 0; overflow-y: auto; }
.app-nav-brand img { display: block; width: auto; height: auto; max-width: 122px; max-height: 48px; object-fit: contain; margin: 0 8px 6px; }
.app-nav-brand .brand-wordmark { margin: 0 8px 6px; max-width: 150px; font-size: 1rem; }
.app-nav-links, .app-nav-footer { display: flex; flex-direction: column; gap: 2px; }
.app-nav-footer { margin-top: auto; align-items: stretch; gap: 2px; }  /* Same width and left edge as the links above. */
.app-nav a, .app-nav-item, .app-nav-agent { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 10px; margin: 0;
  color: var(--muted); background: none; border: 0; border-radius: 7px; font: inherit; font-size: 14px; font-weight: 500;
  text-decoration: none; text-align: left; cursor: pointer; }
.app-nav a:hover, .app-nav-item:hover, .app-nav-agent:hover { background: var(--soft); color: var(--navy); }
.app-nav a[aria-current="page"] { background: var(--soft); color: var(--navy); font-weight: 600; border: 0; }
.app-nav-agent { color: var(--navy); border: 1px solid var(--line-strong); margin-bottom: 8px; }
.app-nav-agent[aria-expanded="true"] { background: var(--soft); }
.nav-icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--amber-soft); color: var(--amber);
  font-size: 12px; font-weight: 600; text-align: center; position: static; }
.app-nav-note { margin: 10px 10px 0; font-size: 12px; color: var(--muted); }

.agent-panel { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 12px; padding: 22px 18px 18px;
  background: var(--paper); border-left: 1px solid var(--line); min-width: 0; }
.agent-panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.agent-panel-heading h2 { margin: 0; font-size: 17px; }
.agent-panel-heading p { margin: 2px 0 0; }
.agent-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; }
.agent-message { max-width: 92%; padding: 10px 12px; border-radius: 10px; background: var(--white); border: 1px solid var(--line);
  color: var(--ink); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-message.from-user { align-self: flex-end; background: var(--navy); border-color: var(--navy); color: var(--white); }
.agent-message.is-pending { color: var(--muted); font-style: italic; }
.agent-message.is-failed { background: var(--red-soft); border-color: #ecc9c3; color: var(--red); }
.agent-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.agent-actions button { min-height: 34px; padding: 4px 10px; font-size: 13px; }
.agent-actions .is-done { color: var(--green); border-color: #bcd6c6; background: var(--green-soft); }
.agent-empty { color: var(--muted); font-size: 14px; }
.agent-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.agent-suggestions button { justify-content: flex-start; text-align: left; min-height: 36px; font-size: 13px; font-weight: 500; }
.agent-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.agent-form textarea { min-height: 44px; max-height: 160px; resize: vertical; font-size: 14px; }

.plan-modes { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden; }
.plan-modes button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 0; background: var(--white); color: var(--muted); font-size: 13px; font-weight: 600; }
.plan-modes button + button { border-left: 1px solid var(--line-strong); }
.plan-modes button[aria-pressed="true"] { background: var(--navy); color: var(--white); }

.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.month-weekday { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 4px 2px; }
.month-day { min-height: 112px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.month-day.is-other { background: var(--paper); }
.month-day.is-other .month-day-number { color: var(--line-strong); }
.month-day.is-today { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.month-day-number { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; align-items: center; }
.month-day-add { border: 0; background: none; color: var(--muted); min-height: 24px; padding: 0 4px; font-size: 16px; opacity: 0; }
.month-day:hover .month-day-add, .month-day-add:focus-visible { opacity: 1; }
.month-chip { display: block; width: 100%; min-height: 0; padding: 4px 6px; border: 1px solid transparent; border-radius: 5px; text-align: left;
  font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--navy); background: #e8eef5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; }
.month-chip.is-ready { background: var(--green-soft); color: var(--green); }
.month-chip:hover { border-color: var(--line-strong); }
[draggable="true"].is-dragging { opacity: .45; }
.is-drop-target { outline: 2px dashed var(--navy); outline-offset: -2px; background: #f1f5fa; }

.post-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.post-filters input[type="search"] { flex: 1 1 240px; width: auto; }
.post-filters select { width: auto; min-width: 150px; }
.filter-check { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.filter-check input { width: 18px; min-height: 18px; }
.plan-list { display: flex; flex-direction: column; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.plan-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; min-height: 56px; padding: 10px 14px;
  border: 0; border-radius: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.plan-row + .plan-row { border-top: 1px solid var(--line); }
.plan-row:hover { background: var(--paper); }
.plan-row-date { font-size: 13px; color: var(--muted); }
.plan-row-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-row-meta { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }

.inbox-list { display: flex; flex-direction: column; gap: 10px; }
.inbox-group h2 { font-size: 15px; margin: 18px 0 8px; }
.inbox-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--white); }
.inbox-item p { margin: 2px 0 0; font-size: 13px; }
.inbox-item strong { font-size: 14px; color: var(--ink); }
.inbox-item .inline-actions { flex-shrink: 0; }
.inbox-item.is-agent { border-color: #e7d7b8; background: var(--amber-soft); }
.inbox-item.is-failed { border-color: #ecc9c3; background: var(--red-soft); }
.inbox-group-items { display: flex; flex-direction: column; gap: 10px; }
.inbox-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.inbox-undo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 8px 8px 8px 16px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--white); font-size: 13px; color: var(--muted); }
.inbox-item-body { flex: 1 1 auto; }
.inbox-dot { width: 9px; height: 9px; flex-shrink: 0; align-self: center; border-radius: 50%; background: transparent; }
.inbox-item.is-new .inbox-dot { background: var(--navy); }
.inbox-item.is-new { border-color: #9fb4c9; }
.inbox-item.is-read strong { font-weight: 500; }
.inbox-item.is-removed { opacity: .7; border-style: dashed; }
.inbox-tag.is-new { background: var(--navy); color: var(--white); font-weight: 700; }
.inbox-item .inbox-read { font-size: 13px; }
.inbox-item.is-read .inbox-read { color: var(--muted); font-weight: 500; }
.inbox-remove { width: 40px; height: 40px; min-height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 7px; color: var(--muted); }
.inbox-remove:hover { background: var(--soft); color: var(--red); }
.inbox-empty { padding: 28px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); }

@media (max-width: 1280px) { #studio:not([hidden]) { grid-template-columns: 208px minmax(0, 1fr) 320px; } #studio.agent-hidden { grid-template-columns: 208px minmax(0, 1fr); } }
@media (max-width: 1080px) {
  #studio:not([hidden]), #studio.agent-hidden { grid-template-columns: 208px minmax(0, 1fr); }
  .agent-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100%); z-index: 40; box-shadow: -12px 0 32px rgba(23, 54, 83, .14); }
}
@media (max-width: 760px) {
  #studio:not([hidden]), #studio.agent-hidden { grid-template-columns: minmax(0, 1fr); }
  .studio-body { padding: 64px 16px 88px; }
  .app-nav { position: static; height: auto; padding: 0; border: 0; overflow: visible; }
  .app-nav-brand { position: fixed; top: 0; left: 0; height: 56px; display: flex; align-items: center; z-index: 31; padding-left: 8px; }
  .app-nav-brand img { max-width: 92px; max-height: 40px; margin: 0; }
  .app-nav-brand .brand-wordmark { margin: 0; }
  .app-nav-links { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; flex-direction: row; justify-content: space-around; gap: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); }
  .app-nav-links a { flex: 1; flex-direction: column; gap: 2px; min-height: 52px; padding: 4px 2px; justify-content: center; font-size: 12px; }
  .app-nav-links a .nav-count { position: absolute; margin: -28px 0 0 26px; min-width: 18px; padding: 0 5px; font-size: 12px; }
  .app-nav-footer { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 30; flex-direction: row; justify-content: flex-end; align-items: center;
    gap: 2px; padding: 0 8px; background: var(--white); border-bottom: 1px solid var(--line); }
  .app-nav-footer > button span:not(.nav-count) { display: none; }
  .app-nav-footer > button { min-height: 44px; min-width: 44px; padding: 0 10px; justify-content: center; margin: 0; }
  .app-nav-agent span { display: inline !important; }
  .app-nav-note { display: none; }
  .agent-panel { width: 100%; box-shadow: none; z-index: 50; }
  .month-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .month-day { min-height: 74px; padding: 3px; }
  .month-chip { padding: 2px 3px; font-size: 12px; }
  .plan-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .inbox-item { flex-direction: column; align-items: stretch; }
  .inbox-dot { display: none; }  /* The "Nowe" label is enough in one column. */
}
.calendar-toolbar { flex-wrap: wrap; row-gap: 12px; }
.week-navigation h2 { white-space: nowrap; }
.plan-modes button, #calendar-new-post { white-space: nowrap; }
.plan-row > span { display: block; min-width: 0; }
.plan-row-title { display: block; }